Angular 6 - Could not find module "@angular-devkit/build-angular"

Question

After updating to Angular 6.0.1, I get the following error on ng serve:

Could not find module "@angular-devkit/build-angular" from "/home/Projects/myProjectName".
Error: Could not find module "@angular-devkit/build-angular" from "/home/Projects/myProjectName".
 at Object.resolve (/home/Projects/myProjectName/node_modules/@angular-devkit/core/node/resolve.js:141:11)
 at Observable.rxjs_1.Observable [as _subscribe] (/home/Projects/myProjectName/node_modules/@angular-devkit/architect/src/architect.js:132:40)

ng update says everything is in order. Deleting the node_modules folder and a fresh npm install install did not help either.

My project is based on ng2-admin (Angular 4 version). Here are my package.json dependencies:

 "dependencies": {
 "@angular/animations": "^6.0.1",
 "@angular/common": "^6.0.1",
 "@angular/compiler": "^6.0.1",
 "@angular/core": "^6.0.1",
 "@angular/forms": "^6.0.1",
 "@angular/http": "^6.0.1",
 "@angular/platform-browser": "^6.0.1",
 "@angular/platform-browser-dynamic": "^6.0.1",
 "@angular/platform-server": "^6.0.1",
 "@angular/router": "^6.0.1",
 "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.26",
 "@ngx-translate/core": "^10.0.1",
 "@ngx-translate/http-loader": "^3.0.1",
 "amcharts3": "github:amcharts/amcharts3",
 "ammap3": "github:amcharts/ammap3",
 "angular-table": "^1.0.4",
 "angular2-csv": "^0.2.5",
 "angular2-datatable": "0.6.0",
 "animate.css": "3.5.2",
 "bootstrap": "4.0.0-alpha.6",
 "bower": "^1.8.4",
 "chart.js": "1.1.1",
 "chartist": "0.10.1",
 "chroma-js": "1.3.3",
 "ckeditor": "4.6.2",
 "core-js": "2.4.1",
 "easy-pie-chart": "2.1.7",
 "font-awesome": "4.7.0",
 "fullcalendar": "3.3.1",
 "google-maps": "3.2.1",
 "ionicons": "2.0.1",
 "jquery": "3.2.1",
 "jquery-slimscroll": "1.3.8",
 "leaflet": "0.7.7",
 "leaflet-map": "0.2.1",
 "lodash": "4.17.4",
 "ng2-ckeditor": "1.1.6",
 "ng2-completer": "^1.6.3",
 "ng2-handsontable": "^2.1.0-rc.3",
 "ng2-slim-loading-bar": "^4.0.0",
 "ng2-smart-table": "^1.0.3",
 "ng2-tree": "2.0.0-alpha.5",
 "ngx-uploader": "4.2.4",
 "normalize.css": "6.0.0",
 "roboto-fontface": "0.7.0",
 "rxjs": "^6.1.0",
 "rxjs-compat": "^6.1.0",
 "zone.js": "0.8.26"
 },
 "devDependencies": {
 "@angular/cli": "^6.0.1",
 "@angular/compiler-cli": "^6.0.1",
 "@types/fullcalendar": "2.7.40",
 "@types/jasmine": "2.5.38",
 "@types/jquery": "2.0.41",
 "@types/jquery.slimscroll": "1.3.30",
 "@types/lodash": "4.14.61",
 "@types/node": "6.0.69",
 "codelyzer": "3.0.1",
 "gh-pages": "0.12.0",
 "jasmine-core": "2.5.2",
 "jasmine-spec-reporter": "3.2.0",
 "karma": "1.4.1",
 "karma-chrome-launcher": "2.0.0",
 "karma-cli": "1.0.1",
 "karma-coverage-istanbul-reporter": "0.2.0",
 "karma-jasmine": "1.1.0",
 "karma-jasmine-html-reporter": "0.2.2",
 "npm-run-all": "4.0.2",
 "protractor": "5.1.0",
 "rimraf": "2.6.1",
 "standard-changelog": "1.0.1",
 "stylelint": "7.10.1",
 "ts-node": "2.1.2",
 "tslint": "5.2.0",
 "tslint-eslint-rules": "4.0.0",
 "tslint-language-service": "0.9.6",
 "typescript": "^2.7.2",
 "typogr": "0.6.6",
 "underscore": "1.8.3",
 "wintersmith": "2.2.5",
 "wintersmith-sassy": "1.1.0"
 }

And my angular.json file:

{
 "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 "version": 1,
 "newProjectRoot": "projects",
 "projects": {
 "ng2-admin": {
 "root": "",
 "sourceRoot": "src",
 "projectType": "application",
 "architect": {
 "build": {
 "builder": "@angular-devkit/build-angular:browser",
 "options": {
 "outputPath": "dist",
 "index": "src/index.html",
 "main": "src/main.ts",
 "tsConfig": "src/tsconfig.app.json",
 "polyfills": "src/polyfills.ts",
 "assets": [
 "src/assets",
 "src/favicon.ico"
 ],
 "styles": [
 "node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss",
 "node_modules/normalize.css/normalize.css",
 "node_modules/font-awesome/scss/font-awesome.scss",
 "node_modules/ionicons/scss/ionicons.scss",
 "node_modules/bootstrap/scss/bootstrap.scss",
 "node_modules/leaflet/dist/leaflet.css",
 "node_modules/chartist/dist/chartist.css",
 "node_modules/fullcalendar/dist/fullcalendar.css",
 "node_modules/handsontable/dist/handsontable.full.css",
 "node_modules/ng2-slim-loading-bar/style.css",
 "src/app/theme/theme.scss",
 "src/styles.scss"
 ],
 "scripts": [
 "node_modules/jquery/dist/jquery.js",
 "node_modules/easy-pie-chart/dist/jquery.easypiechart.js",
 "node_modules/jquery-slimscroll/jquery.slimscroll.js",
 "node_modules/tether/dist/js/tether.js",
 "node_modules/bootstrap/dist/js/bootstrap.js",
 "node_modules/handsontable/dist/handsontable.full.js",
 "node_modules/chroma-js/chroma.js"
 ]
 },
 "configurations": {
 "production": {
 "optimization": true,
 "outputHashing": "all",
 "sourceMap": false,
 "extractCss": true,
 "namedChunks": false,
 "aot": true,
 "extractLicenses": true,
 "vendorChunk": false,
 "buildOptimizer": true,
 "fileReplacements": [
 {
 "replace": "src/environments/environment.ts",
 "with": "src/environments/environment.prod.ts"
 }
 ]
 }
 }
 },
 "serve": {
 "builder": "@angular-devkit/build-angular:dev-server",
 "options": {
 "browserTarget": "ng2-admin:build"
 },
 "configurations": {
 "production": {
 "browserTarget": "ng2-admin:build:production"
 }
 }
 },
 "extract-i18n": {
 "builder": "@angular-devkit/build-angular:extract-i18n",
 "options": {
 "browserTarget": "ng2-admin:build"
 }
 },
 "test": {
 "builder": "@angular-devkit/build-angular:karma",
 "options": {
 "main": "src/test.ts",
 "karmaConfig": "./karma.conf.js",
 "polyfills": "src/polyfills.ts",
 "tsConfig": "src/tsconfig.spec.json",
 "scripts": [
 "node_modules/jquery/dist/jquery.js",
 "node_modules/easy-pie-chart/dist/jquery.easypiechart.js",
 "node_modules/jquery-slimscroll/jquery.slimscroll.js",
 "node_modules/tether/dist/js/tether.js",
 "node_modules/bootstrap/dist/js/bootstrap.js",
 "node_modules/handsontable/dist/handsontable.full.js",
 "node_modules/chroma-js/chroma.js"
 ],
 "styles": [
 "node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss",
 "node_modules/normalize.css/normalize.css",
 "node_modules/font-awesome/scss/font-awesome.scss",
 "node_modules/ionicons/scss/ionicons.scss",
 "node_modules/bootstrap/scss/bootstrap.scss",
 "node_modules/leaflet/dist/leaflet.css",
 "node_modules/chartist/dist/chartist.css",
 "node_modules/fullcalendar/dist/fullcalendar.css",
 "node_modules/handsontable/dist/handsontable.full.css",
 "node_modules/ng2-slim-loading-bar/style.css",
 "src/app/theme/theme.scss",
 "src/styles.scss"
 ],
 "assets": [
 "src/assets",
 "src/favicon.ico"
 ]
 }
 },
 "lint": {
 "builder": "@angular-devkit/build-angular:tslint",
 "options": {
 "tsConfig": [
 "src/tsconfig.app.json",
 "src/tsconfig.spec.json"
 ],
 "exclude": []
 }
 }
 }
 },
 "ng2-admin-e2e": {
 "root": "",
 "sourceRoot": "",
 "projectType": "application",
 "architect": {
 "e2e": {
 "builder": "@angular-devkit/build-angular:protractor",
 "options": {
 "protractorConfig": "./protractor.conf.js",
 "devServerTarget": "ng2-admin:serve"
 }
 },
 "lint": {
 "builder": "@angular-devkit/build-angular:tslint",
 "options": {
 "tsConfig": [
 "e2e/tsconfig.e2e.json"
 ],
 "exclude": []
 }
 }
 }
 }
 },
 "defaultProject": "ng2-admin",
 "schematics": {
 "@schematics/angular:component": {
 "prefix": "app",
 "styleext": "scss"
 },
 "@schematics/angular:directive": {
 "prefix": "app"
 }
 }
}

• Rouhollah Torshizi: I deleted the node_modules and package-lock.json folders and then typed npm i on the command line. After that, everything was fine.
• Janatbek: sometimes, you might not have node_modules folder at all, maybe fresh clone. run npm install first.
• sam sergiy klok: Do you have folder node_modules ? For me the same error happened, when I cloned my Angular project through GitHub on different laptop. I didn't push folder node_modules to save space. Because I was on cell phone tethering, I decided do not reinstall all packages, but copy node_modules folder from different project on the same laptop. And it worked!
• Steve Smith: So many identical answers to this question.
• General Grievance: @SteveSmith I've already flagged a few, but if you notice such answers in the future, you can custom flag them and leave a link to the original answer to get them cleaned up.

Answer 1

Install @angular-devkit/build-angular as dev dependency. This package is newly introduced in Angular 6.0

npm install --save-dev @angular-devkit/build-angular

or,

yarn add @angular-devkit/build-angular --dev

• Ritwick Dey: Exact same error? And the configuration file? are they same as this question?
• subzerodeluxe: Yes. Well, I did some more exploring on this issue. Turns out that it works fine on my Mac Mini, so it will probably has something to do with my Node setup on Windows.
• JJJCoder: Upgrade to angular 7 - the accepted answer fixed the error (have upvoted), but didn't solve the upgrade problem overall. This did stackoverflow.com/a/51592138/852806
• Dan King: Thanks for this. I just hit this problem while attempting to follow the Angular tutorial: angular.io/guide/quickstart - seems like someone forgot to update the documentation?
• André Luís Tomaz Dionisio: I had to run in adicional the following command: "npm audit fix --force"

Answer 2

npm update

It worked like a charm.

• Riegardt Steyn: I moved to a new machine halfway through the angular-tour-of-heroes tutorial and pulled the half baked work from source control. This fixed it.
• Liam: Nothing "half baked" about not checking in the node modules folder. This simply rebuilds your node modules based on your package.json. This is perfectly normal thing to do when you check out a new solution.
• user3025289: There might be additional packages that are outdated. Run ng update --all to try to update all at the same time.
• Ricardo Figueiredo: after i cloned my project in another machine i was having this issue, and this solution worked perfectly, thanks
• Max: this should be the accepted answer.

Answer 3

For Angular 6 and above, the working solution for me was:

npm install

ng update

And finally

npm update

• Aggie Jon of 87: When I do the ng update I got several messages about several specific updates needed. Name Version Command to update -------------------------------------------------------------------------------- @angular/core 4.4.7 -> 8.2.4 ng update @angular/core @ngrx/store 2.2.3 -> 8.3.0 ng update @ngrx/store rxjs 5.5.12 -> 6.5.3 ng update rxjs
• Uri Gross: npm i only without ng update and npm upsdate worked for me (Angular 12). Anyway thank you so much!
• Philip Rego: noo doesnt work
• java-addict301: what do all these do?

Answer 4

We need to explicitly get devDependencies.

npm i --only=dev

• iizAck: This worked for me, same answer in: github.com/angular/angular-cli/issues/…

Answer 5

Please follow these five steps. It's definitely worked (my personal experience)

Step 1: npm uninstall -g @angular/cli

Step 2: npm cache clean --force

Step 3: npm install -g @angular/cli@latest

Step 4: npm i

Step 5: ng build

After that, ng serve.

• Soft Dev Ahmad yar khan: open in browser type cmd: ng servre --o

Answer 6

If the following command does not work,

npm install --save-dev @angular-devkit/build-angular

then move to the project folder and run this command:

npm install --save @angular-devkit/build-angular

• asifaftab87: npm install --save @angular-devkit/build-angular worked for me but only problem was I was trying to run this command from a command prompt which was not run as an administrator, and I entered to execute this command it was not showing any error nothing only cursor was on wait state then I simply run a cmd with admin in it worked. Thanks

Answer 7

I fixed mine by:

1. Delete node_modules folder.

2. run npm install

Answer 8

The only way I was able to make this work was by the following steps/commands:

npm uninstall -g @angular/[email protected]
npm cache clean --force
npm install -g @angular/cli@latest
npm install node-sass -g
ng new MY_PROJECT_NAME
cp -r from_my_old_project to_new_MY_PROJECT_NAME

• VSO: If you are trying to build a library, use ng new MY_PROJECT_NAME --create-application=false for the second-to-last command. I had this error on trying to build a library. The --create-application=false flag avoids pulling in unnecessary dependencies. (angular.io/guide/creating-libraries#getting-started)
• Braj: worked for me after clearing the npm cache and installing again

Answer 9

For Angular 8

Install npm-check-updates package

Run:

$ npm i npm-check-updates
$ ncu -u
$ npm install

This package will update all packages and resolve this issue

Notice: After update If you face this issue:

ERROR in The Angular Compiler requires TypeScript>=3.4.0 and <3.6.0 but 3.6.3 was found instead.

then run:

$ npm install [email protected]

Source Link

• VivekDev: 'ncu' is not recognized as an internal or external command, operable program or batch file.

Answer 10

The following worked for me. Nothing else did, unfortunately.

npm uninstall @angular-devkit/build-angular
npm install @angular-devkit/build-angular
ng update --all --allow-dirty --force

• 13garth: I had a message saying --allow-dirty not installed. But updated my stuff.
• Peter Mortensen: Why does it work? An explanation would be in order. E.g., what is the idea/gist? From the Help Center: "...always explain why the solution you're presenting is appropriate and how it works". Please respond by editing (changing) your answer, not here in comments (*** *** *** *** *** without *** *** *** *** *** "Edit:", "Update:", or similar - the answer should appear as if it was written today).

Answer 11

npm install

Just type npm install and run. Then the project will run without errors.

Or you can use npm install --save-dev @angular-devkit/build-angular.

Answer 12

Try this one.

npm install
npm update

If it shows something like this,

Run npm audit fix to fix them, or npm audit for details

Do that!

• Ε Г И І И О: And when you do that, NPM says 'I sure hope you know what you are doing.'. That gave me the freaks.
• dingalapadum: upvoted since it helped - although only partially. After doing this I still had some missing peer dependencies which I install following this idea: stackoverflow.com/a/51063840/2995907
• Peter Mortensen: Are you quoting something? If so, what is the source?

Answer 13

The following commands works:

npm install
ng update

You may see the message "We analyzed your package.json and everything seems to be in order. Good work!"

npm update

Then try a development build:

ng build

I got the error with TypeScript and downgraded to:

npm install typescript@">=3.1.1 <3.2
ng build --prod

All success with a production build.

Below is the working combination:

ng --version
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.11.0
@angular-devkit/build-angular 0.11.0
@angular-devkit/build-optimizer 0.11.0
@angular-devkit/build-webpack 0.11.0
@angular-devkit/core 7.1.0
@angular-devkit/schematics 7.1.0
@angular/cli 7.1.0
@ngtools/webpack 7.1.0
@schematics/angular 7.1.0
@schematics/update 0.11.0
rxjs 6.3.3
typescript 3.1.6
webpack 4.23.1

Answer 14

A working solution for me:

1. Delete the node_modules folder.

2. Run npm install

Answer 15

npm install --save-dev @angular-devkit/build-angular@latest

solved it for me.

Answer 16

First delete node_modules folder

then Restart system

Run npm install --save-dev @angular-devkit/build-angular

and

Run npm install

Answer 17

Use:

npm i --save-dev @angular-devkit/build-angular

This code installs @angular-devkit/build-angular as a development dependency.

It was 100% tested.

Answer 18

Just update the Angular version and add the below dependency:

ng update

npm update

npm i @angular-devkit/build-angular

https://www.npmjs.com/package/@angular-devkit/build-angular

Answer 19

1. Go to the folder where you created the angular project and the delete the node_modules folder.

2. Now open the command prompt and enter in the project which you want to run using cd.

3. Enter the command

npm i

or

npm install

4. Now the command prompt will start installing the new node_modules files in the project.

5. When the node_modules gets installed then, run the project using command

   ng s --o

If the above method did not work, then there is some mismatch of the version in npm and then try to install the node_modules.

npm update

Generally, this method should work if not worked then try to run this command:

npm install --save-dev @angular-devkit/build-angular

Details and alternative solution: Could not find module "@angular-devkit/build-angular" .

Answer 20

When we run commands like ng serve, it uses the local version of @angular/cli. So first install the latest version of @angular/cli locally (without the -g flag). Then update the cli using the ng update @angular/cli command. I thing this should fix the issue.

Angular Update Guide may help you if you are updating your Angular project.

Answer 21

This error generally occurred when the Angular project was not configured completely.

This will work

npm install --save-dev @angular-devkit/build-angular
npm install

Answer 22

Resolve this Error: An unhandled exception occurred: Could not find the implementation for builder @angular-devkit/build-angular:browser###

Just execute the following command and error was solved

• ng update @angular/cli @angular/core

• npm uninstall @angular-devkit/build-angular

• npm install --save-dev @angular-devkit/build-angular ###if this error could not resolve by above command so you update node version###

• npm update npm -g

Answer 23

Try this first

npm install --save-dev @angular-devkit/build-angular

If some error come again for missing packages try

npm install

Answer 24

That's works for me, commit and then:

ng update @angular/cli @angular/core
npm install --save-dev @angular/cli@latest

Answer 25

All these answers basically say the same

npm install -D @angular-devkit/build-angular
npm install

But this still may fail if you are in a library project like my-lib which is inside an Angular workspace:

workspace
|-- projects
| |-- my-lib
| |-- package.json
|
|-- package.json

In this case, make sure to run npm install not only in the directory workspace/projects/my-lib, but also in workspace directly.

Answer 26

I struggled with the same problem just a minute ago. My project was generated using the version 1.6.0 of angular-cli.

1. npm update -g @angular/cli

2. editing my package.json, changing the line

   "@angular/cli": "1.6.0",
   

   to

   "@angular/cli": "^1.6.0",
   

3. npm update

• SanSolo: This has nothing to do with not being able to find a module. this just means the angular cli module will be updated for any version 1.6.x

Answer 27

• Delete the folder node_modules .
• Clear the cache using npm cache clean --verify.
• And then npm install again.

It works like a charm for me.

Answer 28

I had the same problem today, after upgrading Node.js from v9 to v10.
My environment is set by Docker and I had to remove this command from the my DockerFile:

npm link @angular/cli

It creates a symbolic link to the directory where Node.js is installed.
I guess the angular/cli module in it do not have the same version as the one in the node_modules directory of my project, and this causes the issue.

Answer 29

I had a library which I created in an older version of Angular.

Now that I upgraded to the latest version 11 the build would fail.

Indeed, the builder has changed.

When doing an ng build I was something a somewhat similar error message:

Cannot find module '@angular-devkit/build-ng-packagr/package.json'

In the angular.json file I had to change the builder property:

"builder": "@angular-devkit/build-ng-packagr:build",

with:

"builder": "@angular-devkit/build-angular:ng-packagr",

Answer 30

I faced the same problem.

Surprisingly, it was just because the version specified in package.json was not in the expected format.

I switched from version "version": "0.1" to "version": "0.0.1" and it solved the problem.

Angular needs semantic versioning (also read Semver) with three parts.