Eddie
Reputation: 359
Upgraded Angular 16 application is generating errors
I have an Angular 10 application that I tried to update and make it use Angular 16. I followed the Angular Update Guide page and went up, one version at a time. It all went smooth until I tried moving from Angular 15 to Angular 16. Now, when I execute the "ng version" command in my Visual Studio Code terminal, I see this:
Angular CLI: 16.2.14
Node: 16.20.2
Package Manager: npm 8.19.4
OS: win32 x64
Angular: <error>
... animations, cdk, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1602.14 (cli-only)
@angular-devkit/build-angular <error>
@angular-devkit/core 16.2.14 (cli-only)
@angular-devkit/schematics 16.2.14 (cli-only)
@angular/cli 16.2.14 (cli-only)
@schematics/angular 16.2.14 (cli-only)
rxjs 7.8.1 (cli-only)
typescript <error>
zone.js <error>
Why are there so many errors listed?
The "ng build" command generates this quick error:
Error: Could not find the '@angular-devkit/build-angular:browser' builder's node package.
Running "npm install" generates this error, after it goes through the process for a while:
npm ERR! code 1
npm ERR! path C:\Projects\DevSystems\MMWA\Source\UI\TabletApp\tablet-app\node_modules\esbuild
npm ERR! command failed
npm ERR! command C:\windows\system32\cmd.exe /d /s /c node install.js
npm ERR! node:internal/errors:857
npm ERR! const err = new Error(message);
npm ERR! ^
npm ERR!
npm ERR! Error: Command failed: C:\Program Files\nodejs\node.exe C:\Projects\DevSystems\MMWA\Source\UI\TabletApp\tablet-app\node_modules\esbuild\bin\esbuild --version
npm ERR! node:child_process:899
npm ERR! throw err;
npm ERR! ^
npm ERR!
npm ERR! <ref *1> Error: spawnSync C:\Projects\DevSystems\MMWA\Source\UI\TabletApp\tablet-app\node_modules\@esbuild\win32-x64\esbuild.exe UNKNOWN
npm ERR! at Object.spawnSync (node:internal/child_process:1119:20)
npm ERR! at spawnSync (node:child_process:847:24)
npm ERR! at Object.execFileSync (node:child_process:890:15)
npm ERR! at Object.<anonymous> (C:\Projects\DevSystems\MMWA\Source\UI\TabletApp\tablet-app\node_modules\esbuild\bin\esbuild:220:28)
npm ERR! at Module._compile (node:internal/modules/cjs/loader:1198:14)
npm ERR! at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)
npm ERR! at Module.load (node:internal/modules/cjs/loader:1076:32)
npm ERR! at Function.Module._load (node:internal/modules/cjs/loader:911:12)
npm ERR! at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
npm ERR! at node:internal/main/run_main_module:22:47 {
npm ERR! errno: -4094,
npm ERR! code: 'UNKNOWN',
npm ERR! syscall: 'spawnSync C:\\Projects\\DevSystems\\MMWA\\Source\\UI\\TabletApp\\tablet-app\\node_modules\\@esbuild\\win32-x64\\esbuild.exe',
npm ERR! path: 'C:\\Projects\\DevSystems\\MMWA\\Source\\UI\\TabletApp\\tablet-app\\node_modules\\@esbuild\\win32-x64\\esbuild.exe',
npm ERR! spawnargs: [ '--version' ],
npm ERR! error: [Circular *1],
npm ERR! status: null,
npm ERR! signal: null,
npm ERR! output: null,
npm ERR! pid: 0,
npm ERR! stdout: null,
npm ERR! stderr: null
npm ERR! }
npm ERR!
npm ERR! at checkExecSyncError (node:child_process:861:11)
npm ERR! at Object.execFileSync (node:child_process:896:15)
npm ERR! at validateBinaryVersion (C:\Projects\DevSystems\MMWA\Source\UI\TabletApp\tablet-app\node_modules\esbuild\install.js:98:28)
npm ERR! at C:\Projects\DevSystems\MMWA\Source\UI\TabletApp\tablet-app\node_modules\esbuild\install.js:283:5 {
npm ERR! status: 1,
npm ERR! signal: null,
npm ERR! output: [
npm ERR! null,
npm ERR! Buffer(0) [Uint8Array] [],
npm ERR! Buffer(1377) [Uint8Array] [
npm ERR! 110, 111, 100, 101, 58, 99, 104, 105, 108, 100, 95, 112,
npm ERR! 114, 111, 99, 101, 115, 115, 58, 56, 57, 57, 13, 10,
npm ERR! 32, 32, 32, 32, 116, 104, 114, 111, 119, 32, 101, 114,
npm ERR! 10, 60, 114, 101, 102, 32, 42, 49, 62, 32, 69, 114,
PS C:\Projects\DevSystems\MMWA\Source\UI\TabletApp\tablet-app> npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular-devkit/[email protected]
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^16.2.14" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"^16.2.14" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/compiler-cli
npm ERR! peer @angular/compiler-cli@"^16.0.0" from @angular-devkit/[email protected]
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^16.2.14" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\el\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\el\AppData\Local\npm-cache\_logs\2024-05-01T00_37_05_023Z-debug-0.log
Any thoughts? Ed
Edit: I'll use edits to post comments and address some of the suggestions you have made. For Tibere, issueing that command gives this error:
Using package manager: npm
Collecting installed dependencies...
Found 0 dependencies.
Package '@angular-devkit/build-angular' is not a dependency.
For Yassin, I removed the contents of the node_modules folder and issued the 'npm install' command. It generates an error that has been shown above:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular-devkit/[email protected]
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^16.2.14" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"^16.2.14" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/compiler-cli
npm ERR! peer @angular/compiler-cli@"^16.0.0" from @angular-devkit/[email protected]
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^16.2.14" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\elascu\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\el\AppData\Local\npm-cache\_logs\2024-05-01T14_44_39_506Z-debug-0.log
I do have angular-devkit listed as a dependency:
"devDependencies": {
"@angular-devkit/build-angular": "^16.2.14",
Problem may arise from the fact that in the package-lock.json file I have the old one that did not get migrated:
"devDependencies": {
"@angular-devkit/build-angular": "^15.2.11",
I also cleaned the npm cache several times, but that did not help.
Upvotes: 4
Views: 2411
Answers (3)
Niranjan Kushwaha
Reputation: 21
I am also facing same kind of issue for Angular 14 and 15 I was using Angular cdk version 11.2.5 which was working fine but now when I have updated to Angular 16, it is breaking and showing runtime errors. i do not wish to update "@angular/cdk", "@angular/http", "@ng-bootstrap/ng-bootstrap" etc and want to use same version in Angular 16, How I can do that?
current package.json
{
"name": "proclaim-angular",
"version": "1.0.1",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --configuration=development",
"start-vikings": "ng serve --configuration=development-vikings",
"start-dev": "ng serve --configuration=development",
"start-uat": "ng serve --configuration=uat",
"start-prod": "ng serve --configuration=devProd",
"build-angular": "ng build && gzipper --verbose ./dist",
"lint": "ng lint",
"post-build": "node ./post-build/post-build.js",
"gzipper": "gzipper",
"bundle-report": "webpack-bundle-analyzer dist/stats.json",
"prod-build": "ng build --configuration=production --aot false --build-optimizer=false && npm run post-build",
"stg-build": "ng build --configuration=stg --aot false --build-optimizer=false && npm run post-build",
"stg-vikings-build": "ng build --configuration=development-vikings --aot false --build-optimizer=false && npm run post-build",
"uat-build": "ng build --configuration=uat --aot false --build-optimizer=false && npm run post-build",
"aws-build": "ng build --configuration=aws --aot false --build-optimizer=false && npm run post-build"
},
"private": true,
"dependencies": {
"@angular-devkit/build-angular": "^16.2.16",
"@angular-devkit/core": "16.2.16",
"@angular/animations": "16.2.12",
"@angular/cdk": "11.2.5",
"@angular/common": "16.2.12",
"@angular/compiler": "16.2.12",
"@angular/core": "16.2.12",
"@angular/forms": "16.2.12",
"@angular/http": "7.2.15",
"@angular/localize": "^16.2.12",
"@angular/material": "11.2.5",
"@angular/platform-browser": "16.2.12",
"@angular/platform-browser-dynamic": "16.2.12",
"@angular/platform-server": "16.2.12",
"@angular/router": "16.2.12",
"@angular/service-worker": "16.2.12",
"@angular/upgrade": "16.2.12",
"@material-ui/core": "4.9.12",
"@material-ui/lab": "4.0.0-alpha.51",
"@ng-bootstrap/ng-bootstrap": "5.3.0",
"@nguniversal/common": "7.1.1",
"@nguniversal/express-engine": "7.1.1",
"@nguniversal/module-map-ngfactory-loader": "v7.1.1",
"@types/googlemaps": "3.30.7",
"@types/leaflet": "^1.9.0",
"@types/moment": "2.13.0",
"angular-2-dropdown-multiselect": "^1.9.0",
"angular-in-memory-web-api": "0.6.0",
"angular-ng-autocomplete": "2.0.1",
"angular2-csv": "0.2.5",
"angular2-moment": "1.6.0",
"angular2-notifications": "0.7.8",
"axios": "^0.27.2",
"bootstrap-icons": "1.0.0-alpha2",
"ckeditor": "4.12.1",
"core-js": "2.4.1",
"crypto-js": "^4.1.1",
"d3": "5.7.0",
"file-saver": "1.3.3",
"font-awesome": "4.7.0",
"google-maps-react": "^2.0.2",
"html2canvas": "^1.4.1",
"jasmine": "^3.4.0",
"js-cookie": "2.2.1",
"leaflet": "^1.9.3",
"moment": "^2.29.3",
"ng-block-ui": "1.0.0-beta.10",
"ng-http-interceptor": "3.1.2",
"ng-multiselect-dropdown": "^1.0.0",
"ng2-charts": "1.6.0",
"ng2-ckeditor": "1.2.3",
"ng2-pdf-viewer": "^9.0.0",
"ngx-cookie-service": "2.2.0",
"pdf-lib": "^1.17.1",
"powerbi-client": "2.6.5",
"react": "16.12.0",
"react-bootstrap": "1.0.1",
"react-dom": "16.12.0",
"react-js-pagination": "^3.0.2",
"react-router-dom": "5.1.2",
"react-toastify": "5.5.0",
"reactour": "1.18.0",
"rxjs": "6.6.6",
"rxjs-compat": "6.5.3",
"styled-components": "5.1.1",
"survey-angular": "^1.8.12",
"survey-angular-ui": "^1.12.3",
"survey-core": "^1.12.14",
"survey-creator": "^1.12.3",
"survey-creator-angular": "^1.12.3",
"survey-creator-core": "^1.12.14",
"tslib": "^2.0.0",
"zone.js": "~0.13.3"
},
"devDependencies": {
"@angular/cli": "^16.2.16",
"@angular/compiler-cli": "^16.2.12",
"@angular/language-service": "16.2.12",
"@types/node": "6.0.60",
"@types/react": "^17.0.1",
"@types/react-dom": "^16.9.5",
"@types/react-select": "^3.0.10",
"brotli-gzip-webpack-plugin": "^0.5.0",
"codelyzer": "^0.0.28",
"gzipper": "^3.4.1",
"node-sass": "^7.0.1",
"ts-node": "3.0.4",
"tslint": "~6.1.0",
"typescript": "~4.9.5",
"webpack-bundle-analyzer": "^4.5.0"
}
}
Upvotes: 0
Yassin Mo
Reputation: 610
I have encountered this error before, try to follow one of these steps:
1- Reinstall Dependencies:
remove 'node_modules' directory and reinstalling dependencies by running:
npm install
2- Update Angular CLI:
If you've recently updated your Angular version, ensure that you've updated Angular CLI as well by running:
npm install -g @angular/cli
3- Verify @angular-devkit/build-angular:
ensure that the @angular-devkit/build-angular package is listed as a dependency in package.json file. If it's missing, you can add it manually by running:
npm install @angular-devkit/build-angular --save
4- Clear Cache:
Sometimes, caching issues can cause this problem, use this command:
npm cache clean --force
Upvotes: 2
Tibère B.
Reputation: 1226
From what I can see from your npm error, you seems to have a discrepancy with the installed version of angular-devkit/build-angular which is still in version 15.
I'd suggest running the following command
ng update @angular-devkit/build-angular@16
And then check for any more errors.
Upvotes: 1
Related Questions
- Failing to install opencv4nodejs on Mac (Apple M1) throws path not found error
- Angular 19 upgrade issues - jest-preset-angular. Peer dependency failing
- Angular update from 8 to 13 peer dependency problem
- angular bootstrap is giving error on angular 13 project
- issue while trying to install ng bootstrap in angular
- Npm install fail with node 15 ( Not LTS ) "@angular-devkit/build-angular": "~0.1000.0"
- Issue with installing angular compiler