Error- Cannot find module @angular-devkit/build-angular/package.json
Issue Description:
Angular 9 build ng serve commands gives below error,
An unhandled exception occurred: Cannot find module ‘@angular-devkit/build-angular/package.json’
Resolution
This issue I found to be some mismatch on framework packages when I recently upgraded the Angular CLI to Angular 9. This error could also be producible due to other reasons.
After initial trivial, I was able to resolve the issue by following below steps and series of commands,
Ideally below commands should fix this error but in case if the issue still persists please try using other below commands.
npm install --save-dev @angular-devkit/build-angular
If the above commands don’t fix the issue, please try the below steps.
- Delete node_module folder manually from local project directory
npm rm -rf node_modules
- Delete package-lock.json file. (Don’t worry next npm install anyway will create a fresh package-lock.json file.)
package-lock.json
- Clean NPM cache
npm cache clean --force
If want to use lower Angular version,
Please run below command,
npm install --save-dev @angular/cli@[Your Preferred Version]
Example if you want to use Angular 8 then use below ,
npm install --save-dev @angular/cli@8
If want to use the latest version i.e Angular 9,
npm install --save-dev @angular/cli@latest
- Re-install NPM packages,
The please reinstall npm both globally and locally to the project directory,
npm install -g npm@latest
npm install
For any error, please keep the below command handy additionally if needed,
npm install @angular/compiler-cli
Or
npm install @angular/compiler
Or
npm install angular/compiler-cli/ngcc
Or
npm install --save-dev @angular-devkit/build-angular
You might see different issues if trying to migrate from an older like Angular 5,6,7 to a new Version.
If you need to perform any old framework migration like Angular 6 or 7 then you must migrate the application to Angular 8 first and use migration guidelines to migrate the application to Angular 9.
However for me, the issue fix was simple.
Finally application launches successfully
Additional References:
What Is Angular-DevKit?
DevKit provides a large set of libraries that are used to manage, develop, deploy and analyze code. Angular CLI is built on the top of Angular DevKit
Angular DevKit provides the below set of packages and tools which are very helpful means for managing, deploying, and developing code.
- @angular-devkit/architect
- @angular-devkit/build-angular
- @angular-devkit/build-ng-packagr
- @angular-devkit/build-optimizer
- @angular-devkit/build-webpack
- @angular-devkit/core
- @angular-devkit/schematics
Did the above steps resolved your issue?
Please sound off in the comments below!
Please bookmark this page and share it with your friends. Please Subscribe to the blog to receive notifications on freshly published(2024) best practices and guidelines for software design and development.
Thank you so much. Worked like a charm with the first line.
Thank you so much! This has helped me a lot to solve my problem.
I did work for me ! But I am not sure if I did anything different. I kept on trying the few commands mentioned above and the issue got fixed
This error appears to me
CREATE my-dream-app/README.md (1028 bytes)
CREATE my-dream-app/tsconfig.json (458 bytes)
CREATE my-dream-app/tslint.json (3185 bytes)
CREATE my-dream-app/.editorconfig (274 bytes)
CREATE my-dream-app/.gitignore (631 bytes)
CREATE my-dream-app/.browserslistrc (853 bytes)
CREATE my-dream-app/karma.conf.js (1024 bytes)
CREATE my-dream-app/tsconfig.app.json (287 bytes)
CREATE my-dream-app/tsconfig.spec.json (333 bytes)
CREATE my-dream-app/src/favicon.ico (948 bytes)
CREATE my-dream-app/src/index.html (296 bytes)
CREATE my-dream-app/src/main.ts (372 bytes)
CREATE my-dream-app/src/polyfills.ts (2835 bytes)
CREATE my-dream-app/src/styles.css (80 bytes)
CREATE my-dream-app/src/test.ts (753 bytes)
CREATE my-dream-app/src/assets/.gitkeep (0 bytes)
CREATE my-dream-app/src/environments/environment.prod.ts (51 bytes)
CREATE my-dream-app/src/environments/environment.ts (662 bytes)
CREATE my-dream-app/src/app/app-routing.module.ts (245 bytes)
CREATE my-dream-app/src/app/app.module.ts (393 bytes)
CREATE my-dream-app/src/app/app.component.html (25757 bytes)
CREATE my-dream-app/src/app/app.component.spec.ts (1075 bytes)
CREATE my-dream-app/src/app/app.component.ts (216 bytes)
CREATE my-dream-app/src/app/app.component.css (0 bytes)
CREATE my-dream-app/e2e/protractor.conf.js (869 bytes)
CREATE my-dream-app/e2e/tsconfig.json (294 bytes)
CREATE my-dream-app/e2e/src/app.e2e-spec.ts (645 bytes)
CREATE my-dream-app/e2e/src/app.po.ts (301 bytes)
| Installing packages…
Hi Zxc- Could you please post your error. I don’t see any error code in the code you posted. Also please confirm your Angular version. Thanks.
I just ran all of these commands. Then ran this to fix the ng not found: npm link @angular/cli
Then I ran npm run build-dev and am back to the original error:
Cannot find module ‘@angular-devkit/build-angular/package.json’
Hey Ken, Could you confirm the framework used and migrated to the which latest framework?
Hello. I followed your instructions and I’m still getting the following error:
An unhandled exception occurred: Cannot find module ‘@angular/compiler-cli/ngcc’
Require stack:
– \node_modules\@ngtools\webpack\src\ngcc_processor.js
– \node_modules\@ngtools\webpack\src\angular_compiler_plugin.js
– \node_modules\@ngtools\webpack\src\index.js
.
.
Hello Kcar – Could you try running the commands further: npm install angular/compiler-cli/ngcc.
Performed the above but still getting the below, tearing my hair out!!
An unhandled exception occurred: Cannot find module ‘@angular/compiler-cli’
Require stack:
[cc lang=”html”]…@ngtools/webpack/src/angular_compiler_plugin.js
…@ngtools/webpack/src/index.js
…@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/typescript.js
…@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/index.js
…@angular-devkit/build-angular/src/browser/index.js
…@angular-devkit/architect/node/node-modules-architect-host.js
…@angular-devkit/architect/node/index.js
…@angular/cli/models/architect-command.js
…@angular/cli/commands/build-impl.js
…@angular-devkit/schematics/tools/export-ref.js
…@angular-devkit/schematics/tools/index.js
…@angular/cli/utilities/json-schema.js
…@angular/cli/models/command-runner.js
…@angular/cli/lib/cli/index.js
…@angular/cli/lib/init.js
…@angular/cli/bin/ng[/cc]
Hi Tim – You may want to run few other commands like “npm install @angular/compiler-cli” and “npm install @angular/compiler”.
Please refer for few common commands here commands commands and errors
This issue was hindering me almost for a week! Performed the above step plus a few additional commands and it worked. Thanks.
Thanks, Mick for letting me know the issue is resolved. Cheers!
Could you please share the steps you did to solve this?
Thanks in advance!
Hello Mirna,
Could you please let me know if you are getting any specific errors?
I hope you tried all the above steps mentioned. I do see these errors are not common on all machines.