Open Closed

Angular Custom Project Problem #5712


User avatar
0
Teknosol created

Hello, We are trying to add abp packages into an Angular project that we have created as a custom. But we encountered some errors while adding these packages.

The package names we want to add are as follows:

Under the Dependencies heading: "@abp/ng.account": "~7.3.2", "@abp/ng.components": "~7.3.2", "@abp/ng.core": "~7.3.2", "@abp/ng.oauth": "~7.3.2", "@abp/ng.identity": "~7.3.2", "@abp/ng.setting-management": "~7.3.2", "@abp/ng.tenant-management": "~7.3.2", "@abp/ng.theme.shared": "~7.3.2", "@abp/ng.theme.lepton-x": "~2.3.1"

Under the devDependencies heading: "@abp/ng.schematics": "~7.3.2"

When we want to install the packages in the custom project for the first time and run the project, we encounter errors. Attached are the pictures of the errors we encountered.

https://hizliresim.com/nmu5gw5 https://hizliresim.com/gg2piqo https://hizliresim.com/ikoywtz

Enjoy your work.


12 Answer(s)
  • User Avatar
    1
    masum.ulu created
    Support Team Angular Expert

    Hello,

    Which angular version your custom project can you please share your @angular/* and @angular-* package's versions please ?

    For ABP 7.3.x version angular versions must be ~16.0.0 you can check @angular and @abp versions matrix at the template

  • User Avatar
    0
    Teknosol created

    Hi, version of our current angular project: 14.2.0

  • User Avatar
    1
    masum.ulu created
    Support Team Angular Expert

    Hi again,

    That's why you getting exception. Can you please try to create empty project with @angular packages version ~16.0.0 don't forget ~ it'll install latest patch version ex: 16.0.latest

    So your project must be use Angular 16 version or you can use @abp packages old version. Please check the template folder for your version matrix

  • User Avatar
    1
    masum.ulu created
    Support Team Angular Expert

    You can reach the old version via changing branch or you can use tags for exac version https://github.com/abpframework/abp/blob/6b5ab21c41b12b1bee55e9e021db179109a8700a/templates/app/angular/package.json#L24-L32

  • User Avatar
    0
    Teknosol created

    Hi,

    requested corrections have been made. But we are getting error as below. By the way, our custom project is abp community, not commercial. We get an error like this in version I don't know what else we can do to solve the problem. The part where we get the error is abp packages for now

    https://hizliresim.com/s8dnwv8 https://hizliresim.com/dliy992 https://prnt.sc/UvT7WffUnKTu

    package.json

    {
      "name": "Demo",
      "version": "0.0.0",
      "scripts": {
        "ng": "ng",
        "start": "ng serve --open",
        "build": "ng build",
        "build:prod": "ng build --configuration production",
        "watch": "ng build --watch --configuration development",
        "test": "ng test",
        "lint": "ng lint"
      },
      "private": true,
      "dependencies": {
        "@abp/ng.account": "~7.3.2",
        "@abp/ng.components": "~7.3.2",
        "@abp/ng.core": "~7.3.2",
        "@abp/ng.identity": "~7.3.2",
        "@abp/ng.oauth": "~7.3.2",
        "@abp/ng.setting-management": "~7.3.2",
        "@abp/ng.tenant-management": "~7.3.2",
        "@abp/ng.theme.lepton-x": "~2.3.1",
        "@abp/ng.theme.shared": "~7.3.2",
        "@angular/animations": "~16.0.0",
        "@angular/common": "~16.0.0",
        "@angular/compiler": "~16.0.0",
        "@angular/core": "~16.0.0",
        "@angular/forms": "~16.0.0",
        "@angular/localize": "~16.0.0",
        "@angular/platform-browser": "~16.0.0",
        "@angular/platform-browser-dynamic": "~16.0.0",
        "@angular/router": "~16.0.0",
        "@fullcalendar/angular": "^5.11.0",
        "@fullcalendar/daygrid": "^5.11.0",
        "@fullcalendar/interaction": "^5.11.0",
        "@fullcalendar/list": "^5.11.0",
        "@fullcalendar/timegrid": "^5.11.0",
        "@ng-bootstrap/ng-bootstrap": "^13.1.0",
        "@ng-select/ng-select": "^9.1.0",
        "@ngx-translate/core": "^14.0.0",
        "@ngx-translate/http-loader": "^7.0.0",
        "@ngxs/storage-plugin": "^3.7.6",
        "@ngxs/store": "^3.7.6",
        "@popperjs/core": "^2.11.6",
        "@sweetalert2/ngx-sweetalert2": "^11.0.0",
        "@types/sortablejs": "^1.15.0",
        "angular-cropperjs": "^1.0.2",
        "apexcharts": "^3.36.3",
        "bootstrap": "^5.2.2",
        "bootstrap-icons": "~1.8.3",
        "concurrently": "^8.2.0",
        "cropperjs": "^1.5.12",
        "devextreme": "22.1.7",
        "devextreme-angular": "22.1.7",
        "exceljs": "^4.3.0",
        "feather-icons": "^4.29.0",
        "file-saver": "^2.0.5",
        "file-saver-es": "^2.0.5",
        "jspdf": "^2.5.1",
        "metismenujs": "^1.3.1",
        "ng-apexcharts": "^1.7.4",
        "ng-bootstrap-icons": "^13.1.2-canary.1",
        "ng2-simplemde": "^2.1.0",
        "ngx-clipboard": "^15.1.0",
        "ngx-highlightjs": "^7.0.1",
        "ngx-owl-carousel-o": "^14.0.1",
        "ngx-perfect-scrollbar": "^10.1.1",
        "ngx-sortablejs": "^11.1.0",
        "ngx-toastr": "^15.0.0",
        "rm-datagrid": "^0.0.23",
        "rm-uikit": "^0.0.5",
        "rxjs": "7.8.1",
        "sortablejs": "^1.15.0",
        "sweetalert2": "^11.6.13",
        "tslib": "^2.1.0",
        "zone.js": "~0.13.0"
      },
      "devDependencies": {
        "@abp/ng.schematics": "^6.0.3",
        "@angular-devkit/build-angular": "^16.2.1",
        "@angular-eslint/builder": "^16.1.1",
        "@angular-eslint/eslint-plugin": "~16.0.0",
        "@angular-eslint/eslint-plugin-template": "~16.0.0",
        "@angular-eslint/schematics": "^16.1.1",
        "@angular-eslint/template-parser": "~16.0.0",
        "@angular/cli": "~16.0.0",
        "@angular/compiler-cli": "~16.0.0",
        "@angular/language-service": "~16.0.0",
        "@compodoc/compodoc": "^1.1.21",
        "@storybook/addon-essentials": "^7.4.0",
        "@storybook/addon-interactions": "^7.4.0",
        "@storybook/addon-links": "^7.4.0",
        "@storybook/angular": "^7.4.0",
        "@storybook/blocks": "^7.4.0",
        "@storybook/testing-library": "^0.0.14-next.2",
        "@types/feather-icons": "^4.7.0",
        "@types/jasmine": "~3.6.0",
        "@types/lodash": "^4.14.197",
        "@types/node": "^12.11.1",
        "@typescript-eslint/eslint-plugin": "^5.36.2",
        "@typescript-eslint/parser": "^5.36.2",
        "eslint": "^8.23.0",
        "jasmine-core": "~4.0.0",
        "karma": "~6.3.0",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage": "~2.1.0",
        "karma-jasmine": "~4.0.0",
        "karma-jasmine-html-reporter": "^1.7.0",
        "ng-packagr": "^16.2.2",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "storybook": "^7.4.0",
        "typescript": "~5.0.4"
      }
    }
    
  • User Avatar
    1
    masum.ulu created
    Support Team Angular Expert

    Hi again,

    • Your "@abp/ng.schematics": "^6.0.3" package still got 6.x.x version it must be "~7.3.2".
    • theme-shared package uses @ng-bootstrap/ng-bootstrap, the version must be"^15.0.0" please check theme-shared package's dependency version.
    • @ng-select/ng-select package's version seems like ^9.1.0 it'll install 9.latest.latest but your angular version is 16.0.latest it must be ^11.0.0

    It seems like you depending a lot of package please be careful semantic versioning

  • User Avatar
    1
    masum.ulu created
    Support Team Angular Expert

    If you using abp on backend, why you create custom angular project with Angular CLI ? Instead using ABP CLI. I suggest to create new project with same parameters and copy angular folder to your existing project.

  • User Avatar
    1
    masum.ulu created
    Support Team Angular Expert

    Hi again,

    Have you solved your problem ? 🙂

  • User Avatar
    0
    Teknosol created

    Thank you very much . good luck, but when I tried to start the project, I saw that it could not contact some of the abp services and the page does not open. There are results in the following endpoints, we ask for your help.

    Screen: https://prnt.sc/CFNzHnkHyZJi https://prnt.sc/4ZBJdqNTVwEf https://prnt.sc/iTe9MD-xrf_e https://prnt.sc/B-pHMgSdbXCA https://prnt.sc/50cag9Ut_XcN

    Normally, when we request application-configuration in the api project, currentUser etc. is received without any problems, while the relevant endpoint is triggered in the custom project we created, but it comes empty.

  • User Avatar
    0
    masum.ulu created
    Support Team Angular Expert

    Hi again,

    In your custom project, when you import CoreModule to AppModule, it'll request a few abp end-point check details

    If you not authenticated with angular project app-configuration model will be null or empty which means you'll show isAuthenticated: false

    I understand that you can reach any abp end-point from you custom angular project but response is not returns as expected. It's because of you not authenticated for angular client application. Can you please share a gif/video how you login on angular project ?

  • User Avatar
    0
    Teknosol created

    Hello, If you are available, I can show you the working logic of the project. I can schedule a meeting with applications such as Zoom, Microsoft Teams. For this project to work, we first met with Mr. Galip and got an idea. We can hold our meeting in Turkish.

  • User Avatar
    0
    masum.ulu created
    Support Team Angular Expert

    Hi again,

    Unfortunately I can't give a service like this, we just giving consultancy service on Mr. Galip. If you give me more details about issue I can try to help more. As I understand your previous issue versioning solved. If you can run angular application without exception which means it fixed. For other problems can you please create a new Question 🙂

Made with ❤️ on ABP v9.1.0-preview. Updated on December 12, 2024, 07:15