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.