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 node_modules folder and a fresh npm install install did not help either.

My project is based on ng2-admin(Angular4 version). Here is my package.json dependecies:

 "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:

{
  "$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"
    }
  }
}

Solution 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

Solution 2

npm update

It worked like a charm.

Solution 3

for angular 6 and above

The working solution for me was

npm install

ng update

and finally

npm update

Solution 4

Need to explicitly get devDependencies.

npm i --only=dev

Solution 5

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

View more solutions

Comments

[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.

[Ritwick Dey]

Then try to delete node_module folder & clean cache & install again

[Ritwick Dey]

Try to delete node_module & npm cache... @AmritaSrivastava

[Daniel Hair]

hugo der hungrige here said: 1. Update all dependencies and make sure the app itself works as intented 2. Replace every occurrence of @angular/cli with @angular-devkit/build-angular in the karma.conf.js 3. Removing the files and the preprocessor configs from the karma.conf.js completely. This is all defined in the angular.json and should be handled automatically by the @angular-devkit karma plugin. Doing #3 worked for me

[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.

[JsAndDotNet]

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?

[iamjc015]

I don't know why its called devkit if we still need it on prod?

[iizAck]

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

[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.

[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

[Lonely]

There might be additional packages that are outdated. Run ng update --all to try to update all at the same time.

[Jasmine]

This command is only making the situation bad by removing the angular devkit

[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

[Ε Г И І И О]

And when you do that, NPM says 'I sure hope you know what you are doing.'. That gave me the freaks.

[13garth]

I had a message saying --allow-dirty not installed. But updated my stuff.

[André Luís Tomaz Dionisio]

I had to run in adicional the following command: "npm audit fix --force"

[Alan Cabrera]

Seems wonky that I have to execute this command every time I clear out node_modules/.

[Fábio BC Souza]

just try yarn or npm install

[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)

[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

[Braj]

worked for me after clearing the npm cache and installing again

[VivekDev]

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

[Welyngton Dal Prá]

old npm or Node versions does not throw this error "Could not find module “@angular-devkit/build-angular”, the aswear is just install the dependency:npm install --save-dev @angular-devkit/build-angular

[A.Bhagat]

This solution not work for me. if any other solution please update

[Soft Dev Ahmad yar khan]

open in browser type cmd: ng servre --o

[Ricardo Figueiredo]

after i cloned my project in another machine i was having this issue, and this solution worked perfectly, thanks

[ForestG]

this is not an ionic project.

[hotmeatballsoup]

Question though: if my package.json mentioned it needs this package as a dev dependency, why wouldn't NPM fetch it for me, transitively? Seems like a bad UX to me.

[Vijay]

This issue might occur some times due to restricted environment also. check with IT team for angular repo setup internal. Most of the banking services companies will not accept public artifactories.

[Ariel Mirra]

unhelpful comment, try answering why it worked, what was failing, etc.

[Swapnil Mhaske]

I used ng --version inside the project. It showed me the list with error. So, it means the list didnt had this package installed properly. When I went outside of the app and checked ng --version, so global one didnt even listed it. So, I guess my yarn installtion didnt install the dev dependencies properly

[Uri Gross]

npm i only without ng update and npm upsdate worked for me (Angular 12). Anyway thank you so much!

[Max]

this should be the accepted answer.