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

10 Answer(s)

• 

  0

  Repunjay created 2 years ago

  Hi Team,

  Could you please guide us on the problems mentioned above?

  Save Cancel
• 

  0

  muhammedaltug created 2 years ago

  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",
      }
  }
  

  Save Cancel
• 

  0

  Repunjay created 2 years ago

  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.

  Save Cancel
• 

  0

  muhammedaltug created 2 years ago

  Hello,

  Can you share the result of the command below?

  yarn why @volo/abp.ng.identity
  

  How did you upgrade angular version?

  Save Cancel
• 

  0

  Repunjay created 2 years ago

  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

  3. there are lot of errors related to '@abp/ng.core', 'snq', '@abp/ng.theme.shared' also.

  Save Cancel
• 

  0

  muhammedaltug created 2 years ago

  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?

  Save Cancel
• 

  0

  Repunjay created 2 years ago

  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" ] }

  ""

  Save Cancel
• 

  0

  muhammedaltug created 2 years ago

  Hello,

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

  Save Cancel
• 

  0

  Repunjay created 2 years ago

  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.

  Save Cancel
• 

  0

  muhammedaltug created 2 years ago

  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

  Save Cancel