CODEWITHSUNDEEP
angularupgradeangular14upgrade
user3901737
user3901737

Reputation: 43

Upgrading Angular project from 9.1.12 to 14.0.6 have build issue

After upgrading the angular project from 9.1.12 to 14.0.6 this is the error I see after building the project by running npm run build:

npm run build                       

> [email protected] build C:\projects\gui-components
> ng build

⠋ Generating browser application bundles (phase: setup)...Warning: Support was requested for Internet Explorer in the project's browserslist configuration. Internet Explorer is no longer officially supported.
For more information, see https://angular.io/guide/browser-support
✔ Browser application bundle generation complete.

./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Emit

./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Emit

Error: Failed to initialize Angular compilation - The target entry-point "ngx-toastr" has missing dependencies:
 - @angular/compiler/src/core

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `ng build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Julia.Kabirian\AppData\Roaming\npm-cache\_logs\2022-07-20T02_31_50_647Z-debug.log

Here is my package.json file:

{
  "name": "gui",
  "version": "2.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:lib": "ng build gui-components --watch",
    "build:docs": "ng build --configuration production  --base-href /content-app/",
    "pack": "cd dist/@leapdev/gui-components && del *.tgz && npm pack",
    "version": "echo %npm_package_version%"
  },
  "dependencies": {
    "@angular/animations": "^14.0.6",
    "@angular/common": "14.0.6",
    "@angular/compiler": "14.0.6",
    "@angular/core": "14.0.6",
    "@angular/forms": "14.0.6",
    "@angular/platform-browser": "14.0.6",
    "@angular/platform-browser-dynamic": "14.0.6",
    "@angular/router": "14.0.6",
    "@leapdev/gui": "0.2.260",
    "@leapdev/gui-components": "2.2.30",
    "@leapdev/gui-icons": "2.0.28",
    "@ng-select/ng-select": "4.0.4",
    "bootstrap": "4.3.1",
    "caniuse-lite": "^1.0.30001019",
    "countries-list": "2.5.0",
    "highlight.js": "^11.6.0",
    "lite-server": "^2.5.4",
    "lodash-es": "^4.17.21",
    "moment": "^2.29.4",
    "ng-inline-svg": "10.1.0",
    "ngx-bootstrap": "6.2.0",
    "ngx-highlightjs": "4.0.2",
    "ngx-logger": "4.0.7",
    "ngx-toastr": "^10.2.0",
    "rxjs": "6.6.3",
    "svg4everybody": "^2.1.9",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "14.0.6",
    "@angular/cli": "14.0.6",
    "@angular/compiler-cli": "14.0.6",
    "@angular/language-service": "14.0.6",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "2.0.8",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ng-packagr": "^14.0.3",
    "protractor": "~7.0.0",
    "ts-node": "7.0.1",
    "tsickle": "0.39.1",
    "tslint": "~6.1.0",
    "typescript": "4.6.4"
  }
}

Things that I have tried was to delete node-modules and run npm install. tried this command npm install ngx-toastr --save Any thoughts and ideas will be very much appreciated. Runnig this npm ls @angular/core command showing this error:

PS C:\Users\Julia.Kabirian\projects\gui-components> npm ls @angular/core
[email protected] C:\Users\Julia.Kabirian\projects\gui-components
+-- UNMET PEER DEPENDENCY @angular/[email protected] 
`-- [email protected]
  `-- @angular/[email protected] 

npm ERR! peer dep missing: @angular/core@9.*, required by @leapdev/[email protected]
npm ERR! peer dep missing: @angular/core@>=9.0.0 <10.0.0, required by @ng-select/[email protected]
npm ERR! peer dep missing: @angular/core@>=2.3.1 <13.0.0 || ^12.0.0-next || ^12.1.0-next || ^12.2.0-next, required by [email protected]
npm ERR! peer dep missing: @angular/core@^8.0.0, required by [email protected]
npm ERR! peer dep missing: @angular/core@^6.0.0 || ^7.0.0 || ^8.0.0, required by [email protected]
npm ERR! peer dep missing: @angular/core@>=6.0.0 <9.0.0, required by [email protected]
My node version is v14.15.1

Upvotes: 3

Views: 3935

Answers (3)

user3901737
user3901737

Reputation: 43

The issue with the ngx-toastr resolved by manually upgrade to "ngx-toastr": "^13.2.1" issue of the polyfill was related to this line of code import 'core-js/es/array'; as we no longer support IE removed it.

Upvotes: 0

RomainG
RomainG

Reputation: 597

You should try to remove node_modules and package-lock.json, then npm install.

You should check if your dependencies are at the latest version -> npm outdated.

You can check also your Node version. It should be between >=14.15.0 and >=16.10.0.

Upvotes: 1

Pavan Jadda
Pavan Jadda

Reputation: 4871

Did you try to update from Angular 9 to 10?

  1. If yes, did you see any errors?
  2. If not, try to do it via below command
npx @angular/cli@10 update @angular/core@10 @angular/cli@10
  1. Then run the application. If it works, try to upgrade to Angular 11, then 12 and so on
  2. https://update.angular.io/?v=9.1-10.0 is your friend. It shows detailed changes between each version.

Pro tip: After one version migration, if something does not work, reinstall dependencies

$ rm -rf node_modules
$ npm i --force

Upvotes: 1

Related Questions