Could not find module “@angular-devkit/build-angular”

718
votes

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"
    }
  }
}
30
angularangular-cliangular6angular-cli-v6
I deleted the node_modules and package-lock.json folders and then typed npm i on the command line. After that, everything was fine. – Rouhollah Torshizi
sometimes, you might not have node_modules folder at all, maybe fresh clone. run npm install first. – Janatbek Orozaly

30 Answers

1133
votes

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
242
votes
npm update

It worked like a charm.

121
votes

for angular 6 and above

The working solution for me was

npm install

ng update

and finally

npm update

34
votes

Need to explicitly get devDependencies.

npm i --only=dev
19
votes

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
17
votes

I fixed mine by:

  1. Delete node_modules folder.

  2. run npm install

Hope this helped!

14
votes

All of the above answer are correct but they did not work for me. The only way I was able to make this work was by follow 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
12
votes

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

9
votes

Please follow these 5 steps,it's worked definitely. (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 .I hope definitely your problem will be solved.

8
votes

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

8
votes

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
7
votes

Try this one.

npm install

npm update

if it's shows something like this.

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

Do that!

6
votes

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 dev build 

ng build

I got the error with type script, downgraded to 

npm install typescript@">=3.1.1 <3.2

ng build --prod

All success with prod 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
5
votes
npm install --save-dev @angular-devkit/build-angular@latest

solved it for me.

5
votes

First delete node_modules folder

then Restart system

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

and

Run npm install

4
votes

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

This link may help you if you are updating your angular project https://update.angular.io/

4
votes

I had the same issue with Angular 7. Just executed the following command and error was solved.

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

This error generally occurs when the angular project was not configure completely.

This will work

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

npm install
4
votes

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
3
votes

I struggled with the same problem just a minute ago. My project was generated using the v 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

I hope my help is effective ツ

3
votes

Try this first 

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

If some error come again for missing packages try

npm install
3
votes

That's works for me, commit and then:

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

I had the same problem today, after upgrading node 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 symlink to the directory where node is installed.
I guess the angular/cli module in it do not have the same version as the one in the node_modules dir of my project, and this causes the issue.

3
votes

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

This code install @angular-devkit/build-angular as dev dependency.

100% TESTED.

2
votes

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",
2
votes

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.

2
votes

if have run following command in angular cli the project will run successfully.

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

I am facing the same issue since 2 days.

ng -v :6.0.8
node -v :8.11.2
npm -v :6.1.0

Make sure you are in the folder where angular.json is installed. Get into that and type ng serve. If the issue still arises, then you are having only dependencies installed in node_modules. Type the following, and it will work:

npm i --only=dev
1
votes

Unfortunately, none of the provided solutions worked perfectly for me, but grepit's answer inspired me to do the following steps. I uninstalled node.js via my OS (Windows 10) and installed it again. Then installed Angular CLI. Then created a new project, and copied my old project's src file into this new one and the error's gone.

Here are the instructions:

  1. Uninstall node.js via your OS and install it again
  2. npm install -g @angular/cli
  3. Rename your project to YOUR_PROJECT_NAME.old
  4. ng new YOUR_PROJECT_NAME
  5. Run this hello world project (ng serve) to make sure that you won't get the error.
  6. xcopy YOUR_PROJECT_NAME.old\src\*.* YOUR_PROJECT_NAME\src /s
    This is Windows version of copy, change it based on your own OS.
1
votes

with the help of below commands your application will work as you aspected run each command as I mention

 1.npm list -g --depth=0
 2.npm i npm-check-updates
 3.npm install

and finally, run the below command to open your project in browser

ng serve --open