Open Closed

[Angular] Package Issues after upgraded Angular Application to Abp 6.0.3 #4459


User avatar
0
Repunjay created
  • ABP Framework version: v6.0.3
  • UI type: Angular v14
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): yes
  • Exception message and stack trace:
  • Steps to reproduce the issue:"
  1. Updated Angular App to 14.
  2. Added theme styles in angular.json
  3. I am getting some volo abp related errors, so as per the below guide (https://docs.abp.io/en/abp/latest/Migration-Guides/Abp-5_0-Angular), I have added the dependencies, but yarn command throwing an error.
  4. 5 Application is giving below errors, most of them related to Abp packages.

Most of the errors related to same pattern - Module '"@abp/ng.core"' has no exported member 'ProfileService'.

1 import { ConfigStateService, ProfileService, SubscriptionService } from '@abp/ng.core'; 2. "@volo/abp.ng.account/public"' has no exported member 'ProfileResponse'. 3. import { ConfigStateService, ProfileService, SubscriptionService } from '@abp/ng.core'; 4. error TS2305: Module '"@volo/abp.ng.account/public"' has no exported member 'ProfileResponse'. 5. import { Profile } from '@abp/ng.core'; 6. '"@abp/ng.core"' has no exported member 'ApplicationConfiguration'. 7. Module '"@abp/ng.core"' has no exported member 'Config'. 8. Module '"@abp/ng.core"' has no exported member 'ConfigState'. 9. Module '"@abp/ng.core"' has no exported member 'GetAppConfiguration'. 10. Module '"@abp/ng.core"' has no exported member 'SettingTabsService'.
11. : Cannot find module '@volo/abp.ng.account/public/volo-abp.ng.account-public' or its corresponding type declarations. 12. No suitable injection token for parameter 'settingTabs' of class 'AppComponent'. Consider using the @Inject decorator to specify an injection token. 13. import { MatOption } from '@angular/material/core/option/option'; 14. import { MatTabGroup } from '@angular/material/tabs/tab-group'; 15. Module '"@volo/abp.ng.identity"' has no exported member 'IdentityUserCreateDto'. 16. Module '"@volo/abp.ng.identity"' has no exported member 'IdentityUserDto'. 17. Module '"@volo/abp.ng.identity"' has no exported member 'IdentityUserService'. 18. Module '"@volo/abp.ng.identity"' has no exported member 'IdentityUserUpdateDto'. 19. Module '"@volo/abp.ng.identity"' has no exported member 'IdentityUserService'. 20. No suitable injection token for parameter 'identityUsersService' of class 'LockUserComponent'. Consider using the @Inject decorator to specify an injection token. 21. Module '"@volo/abp.ng.identity"' has no exported member 'GetIdentityUsersInput'. import { GetIdentityUsersInput, IdentityUserService } from '@volo/abp.ng.identity'; 22. : The class 'TwoFactorComponent' is listed in the declarations of the NgModule 'IdentityUsersModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator. 23. Cannot find module '@angular/material/tabs/tab-group' or its corresponding type declarations. 24. Cannot find module '@angular/material/tabs/tab-group' or its corresponding type declarations. import { MatTabGroup } from '@angular/material/tabs/tab-group'; 25. : Module '"@abp/ng.theme.shared"' has no exported member 'chartJsLoaded$'. import { chartJsLoaded$ } from '@abp/ng.theme.shared'; 26. error TS2305: Module '"@angular/compiler"' has no exported member 'flatten'. 27. Module '"@angular/compiler"' has no exported member 'ThrowStmt'. 28. Module '"@volo/abp.ng.identity"' has no exported member 'IdentitySecurityLogService'. 29. error TS2724: '"@volo/abp.ng.identity"' has no exported member named 'OrganizationUnitService'. Did you mean 'OrganizationUnitsState'? 30. Module '"@volo/abp.ng.identity"' has no exported member 'OrganizationUnitCreateDto'. 31. "@volo/abp.ng.identity"' has no exported member named 'OrganizationUnitService'. Did you mean 'OrganizationUnitsState'? 32. Module '"@abp/ng.core"' has no exported member 'ApplicationConfiguration'. import { ApplicationConfiguration, ConfigState } from '@abp/ng.core'; 33. : Module '"@abp/ng.core"' has no exported member 'ConfigState'. 34. Cannot find module 'snq' or its corresponding type declarations. import snq from 'snq'; 35. Module '"@volo/abp.ng.identity"' has no exported member 'GetIdentitySecurityLogListInput'. 36. Module '"@volo/abp.ng.identity"' has no exported member 'IdentitySecurityLogService'. 37. Module '"@abp/ng.core"' has no exported member 'GetAppConfiguration'.

  1. below is my package.json file dependencies list

"dependencies": { "@abp/ng.account": "^6.0.3", "@angular/animations": "^14.2.12", "@angular/cdk": "^14.2.7",
"@angular/common": "^14.2.12", "@angular/compiler": "^14.2.12", "@angular/core": "^14.2.12", "@angular/forms": "^14.2.12", "@angular/localize": "12", "@angular/material": "^14.2.7", "@angular/material-moment-adapter": "^14.2.7", "@angular/platform-browser": "^14.2.12", "@angular/platform-browser-dynamic": "^14.2.12", "@angular/router": "^14.2.12", "@microsoft/signalr": "^5.0.1", "@ngxs/store": "^3.7.6", "@techiediaries/ngx-qrcode": "^9.1.0", "@volo/abp.ng.account": "^6.0.3", "@volo/abp.ng.audit-logging": "^6.0.3", "@volo/abp.ng.identity": "^6.0.3", "@volo/abp.ng.identity-server": "^6.0.3", "@volo/abp.ng.language-management": "^6.0.3", "@volo/abp.ng.saas": "^6.0.3", "@volo/abp.ng.text-template-management": "^6.0.3", "@volo/abp.ng.theme.lepton": "^6.0.3", "ansi-regex": "^6.0.1", "chart.js": "^2.9.4", "crypto-js": "^4.1.1", "eventsource": "^2.0.2", "highcharts": "^10.2.1", "highcharts-angular": "^2.8.0", "highcharts-custom-events": "^3.0.9", "istanbul-reports": "^3.1.5", "jest": "^27.0.4", "jest-preset-angular": "^9.0.4", "lodash": "4.17.21", "minimist": "^1.2.6", "moment": "^2.29.4", "moment-timezone": "^0.5.40", "ng-zorro-antd": "15.0.3", "node-fetch": "^3.2.10", "nwsapi": "^2.2.2", "path-parse": "^1.0.7", "prompts": "^2.4.2", "rxjs": "~6.6.0", "tmpl": "^1.0.5", "tslib": "^2.5.0", "url-parse": "^1.5.10", "ws": "^8.12.0", "xlsx": "^0.17.0", "y18n": "^5.0.8", "zone.js": "~0.11.4" }, "devDependencies": { "@abp/ng.schematics": "^6.0.3", "@angular-devkit/build-angular": "^14.2.10", "@angular/cli": "^14.2.10", "@angular/compiler-cli": "^14.2.12", "@angular/language-service": "^14.2.12", "@ngxs/logger-plugin": "^3.6.2", "@types/jasmine": "~3.6.0", "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~6.3.4", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.7.0", "ng-packagr": "^14.2.2", "ngxs-schematic": "1.1.9", "protractor": "~7.0.0", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~4.6.4" } }

  1. Need to update Angular App to OpenIdDict also.

10 Answer(s)
  • User Avatar
    0
    Repunjay created

    Hi Team,

    Could you please guide us on the problems mentioned above?

  • User Avatar
    0
    muhammedaltug created

    Hello

    You shouldn't add secondary entrypoints to package.json. If you using services, models etc from ABP packages, you need to change imports. For example, if you use IdentityUserService, you need to change import with the following way

    before

    import { IdentityUserService } "@volo/abp.ng.identity"
    

    to

    import { IdentityUserService } "@volo/abp.ng.identity/proxy"
    

    Please ensure the following dependencies matches with your project dependencies for updating version to ABP version 6.0

    {
        "dependencies":{
            // other deps
            "@abp/ng.components": "~6.0.3",
            "@abp/ng.core": "~6.0.3",
            "@abp/ng.setting-management": "~6.0.3",
            "@abp/ng.theme.shared": "~6.0.3",
            "@volo/abp.commercial.ng.ui": "~6.0.3",
            "@volo/abp.ng.account": "~6.0.3",
            "@volo/abp.ng.audit-logging": "~6.0.3",
            "@volo/abp.ng.gdpr": "~6.0.3",
            "@volo/abp.ng.identity": "~6.0.3",
            "@volo/abp.ng.openiddictpro": "~6.0.3",
            "@volo/abp.ng.language-management": "~6.0.3",
            "@volo/abp.ng.saas": "~6.0.3",
            "@volo/abp.ng.text-template-management": "~6.0.3",
            "@volo/abp.ng.theme.lepton": "~6.0.3",
        }
    }
    
  • User Avatar
    0
    Repunjay created

    Hello

    You shouldn't add secondary entrypoints to package.json. If you using services, models etc from ABP packages, you need to change imports. For example, if you use IdentityUserService, you need to change import with the following way

    before

    import { IdentityUserService } "@volo/abp.ng.identity" 
    

    to

    import { IdentityUserService } "@volo/abp.ng.identity/proxy" 
    

    Please ensure the following dependencies matches with your project dependencies for updating version to ABP version 6.0

    { 
        "dependencies":{ 
            // other deps 
            "@abp/ng.components": "~6.0.3", 
            "@abp/ng.core": "~6.0.3", 
            "@abp/ng.setting-management": "~6.0.3", 
            "@abp/ng.theme.shared": "~6.0.3", 
            "@volo/abp.commercial.ng.ui": "~6.0.3", 
            "@volo/abp.ng.account": "~6.0.3", 
            "@volo/abp.ng.audit-logging": "~6.0.3", 
            "@volo/abp.ng.gdpr": "~6.0.3", 
            "@volo/abp.ng.identity": "~6.0.3", 
            "@volo/abp.ng.openiddictpro": "~6.0.3", 
            "@volo/abp.ng.language-management": "~6.0.3", 
            "@volo/abp.ng.saas": "~6.0.3", 
            "@volo/abp.ng.text-template-management": "~6.0.3", 
            "@volo/abp.ng.theme.lepton": "~6.0.3", 
        } 
    } 
    

    Hi

    1. Removed duplicate entries in package.json file, see below for the same.

      "dependencies": {
      "@angular/animations": "^14.2.12", "@angular/cdk": "^14.2.7",
      "@angular/common": "^14.2.12", "@angular/compiler": "^14.2.12", "@angular/core": "^14.2.12", "@angular/forms": "^14.2.12", "@angular/localize": "12", "@angular/material": "^14.2.7", "@angular/material-moment-adapter": "^14.2.7", "@angular/platform-browser": "^14.2.12", "@angular/platform-browser-dynamic": "^14.2.12", "@angular/router": "^14.2.12", "@microsoft/signalr": "^5.0.1", "@ngxs/store": "^3.7.6", "@techiediaries/ngx-qrcode": "^9.1.0", "@volo/abp.ng.account": "^6.0.3", "@volo/abp.ng.audit-logging": "^6.0.3", "@volo/abp.ng.identity": "^6.0.3",
      "@volo/abp.ng.language-management": "^6.0.3", "@volo/abp.ng.saas": "^6.0.3", "@volo/abp.ng.text-template-management": "^6.0.3", "@volo/abp.ng.theme.lepton": "^6.0.3", "@abp/ng.components": "~6.0.3", "@abp/ng.core": "~6.0.3", "@abp/ng.setting-management": "~6.0.3", "@abp/ng.theme.shared": "~6.0.3", "@volo/abp.commercial.ng.ui": "~6.0.3", "@volo/abp.ng.gdpr": "~6.0.3", "@volo/abp.ng.openiddictpro": "~6.0.3", "ansi-regex": "^6.0.1", "chart.js": "^2.9.4", "crypto-js": "^4.1.1", "eventsource": "^2.0.2", "highcharts": "^10.2.1", "highcharts-angular": "^2.8.0", "highcharts-custom-events": "^3.0.9", "istanbul-reports": "^3.1.5", "jest": "^27.0.4", "jest-preset-angular": "^9.0.4", "lodash": "4.17.21", "minimist": "^1.2.6", "moment": "^2.29.4", "moment-timezone": "^0.5.40", "ng-zorro-antd": "15.0.3", "node-fetch": "^3.2.10", "nwsapi": "^2.2.2", "path-parse": "^1.0.7", "prompts": "^2.4.2", "rxjs": "~6.6.0", "tmpl": "^1.0.5", "tslib": "^2.5.0", "url-parse": "^1.5.10", "ws": "^8.12.0", "xlsx": "^0.17.0", "y18n": "^5.0.8", "zone.js": "~0.11.4" },

    2. Angular Version Updated to 14 as ABP 6 required, along with all the required dev dependencies, below are the same.

      "devDependencies": { "@abp/ng.schematics": "^6.0.3", "@angular-devkit/build-angular": "^14.2.10", "@angular/cli": "^14.2.10", "@angular/compiler-cli": "^14.2.12", "@angular/language-service": "^14.2.12", "@ngxs/logger-plugin": "^3.6.2", "@types/jasmine": "~3.6.0", "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~6.3.4", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.7.0", "ng-packagr": "^14.2.2", "ngxs-schematic": "1.1.9", "protractor": "~7.0.0", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~4.6.4" }

    3. Before

    4. After

    5. Separated. IdentityUserService

    Note: Deleted NodeModules and ran the "yarn install" command after updating the "package.json" file.

    Please let me know if you need any more details.

  • User Avatar
    0
    muhammedaltug created

    Hello,

    Can you share the result of the command below?

    yarn why @volo/abp.ng.identity
    

    How did you upgrade angular version?

  • User Avatar
    0
    Repunjay created

    yarn why @volo/abp.ng.identity

    1. yarn why @volo/abp.ng.identity

    2. App previous version is 11, so ran the update commands one by one as below. ng update @angular/core@12 @angular/cli@12 ng update @angular/core@13 @angular/cli@13 ng update @angular/core@14 @angular/cli@14

    as mentioned in www.update.angular.io website. Angular Material commands also ran ng update @angular/material@12 ng update @angular/material@13 ng update @angular/material@14

    1. there are lot of errors related to '@abp/ng.core', 'snq', '@abp/ng.theme.shared' also.
  • User Avatar
    0
    muhammedaltug created

    Hello,

    Can you change import ApplicationConfiguration to ApplicationConfigurationDto?

    snq dependency removed from ABP packages. You can install it with yarn add snq, or you can change snq usage with the optional chaining (?.) operator.

    States removed from ABP packages. See related document

    Can you send tsconfig.json and tsconfig.app.json?

  • User Avatar
    0
    Repunjay created

    Hello,

    Can you change import ApplicationConfiguration to ApplicationConfigurationDto?

    snq dependency removed from ABP packages. You can install it with yarn add snq, or you can change snq usage with the optional chaining (?.) operator.

    States removed from ABP packages. See related document

    Can you send tsconfig.json and tsconfig.app.json?

    1. Changed ApplicationConfiguration to ApplicationConfigurationDto, but still its showing the error 2. snq installed using "yarn add snq" command, but still its showing the error.

    Its showing can't find module '@abp/ng.core' or its corresponding type declarations, but the packages are installed and presented in "package.json" file.

    Pasted tsconfig.json and tsconfig.app.json file values.

    ** tsconfig.json**

    { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "module": "esnext", "moduleResolution": "node", "importHelpers": true, "target": "es2020", "resolveJsonModule": true, "typeRoots": [ "node_modules/@types" ], "lib": [ "es2018", "dom" ] }, "angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true, "enableI18nLegacyMessageIdFormat":false } }

    "tsconfig.app.json"

    { "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", "types": [] }, "files": [ "src/main.ts", "src/polyfills.ts" ], "include": [ "src/**/*.d.ts" ] }

    ""

  • User Avatar
    0
    muhammedaltug created

    Hello,

    I can't reproduce your problem. But it seems something is wrong. Can you create a new application and compare angular files?

  • User Avatar
    0
    Repunjay created

    Hello,

    I can't reproduce your problem. But it seems something is wrong. Can you create a new application and compare angular files?

    Hi, I have compared the below files with ABP Template, but didn't found any difference in the files. 1. Angular.json 2. Package.json 3. tsconfig.app.json 4. tsconfig.json.

    Please guide us on next steps to resolve this issue.

  • User Avatar
    0
    muhammedaltug created

    Hello,

    Are errors the same as compile errors(errors in ng serve or ng build)? Vscode may not be able to resolve packages. Please ensure vscode is up to date

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