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

Question

Using npm, I followed the getting started directions on the Angular CLI quick start page.

Running ng serve --open after creating and going into my new project "frontend" gave this error:

Could not find module "@angular-devkit/build-angular" from "C:\\Users\\Brandon\\project-name\\frontend".
Error: Could not find module "@angular-devkit/build-angular" from "C:\\Users\\Brandon\\project-name\\frontend".
 at Object.resolve (C:\Users\Brandon\project-name\node_modules\@angular-devkit\core\node\resolve.js:141:11)
 at Observable.rxjs_1.Observable [as _subscribe] (C:\Users\Brandon\project-name\node_modules\@angular-devkit\architect\src\architect.js:132:40)

I have tried suggestions from the other question similar to mine but it did not work. Answer was to run npm install --save-dev @angular-devkit/build-angular.

Similar Question

I have also deleted modules, cleared cache, then did an install which also did not work.

package.json:

{
 "name": "frontend",
 "version": "0.0.0",
 "scripts": {
   "ng": "ng",
   "start": "ng serve",
   "build": "ng build",
   "test": "ng test",
   "lint": "ng lint",
   "e2e": "ng e2e"
 },
"private": true,
"dependencies": {
  "@angular/animations": "^6.0.2",
  "@angular/common": "^6.0.2",
  "@angular/compiler": "^6.0.2",
  "@angular/core": "^6.0.2",
  "@angular/forms": "^6.0.2",
  "@angular/http": "^6.0.2",
  "@angular/platform-browser": "^6.0.2",
  "@angular/platform-browser-dynamic": "^6.0.2",
  "@angular/router": "^6.0.2",
  "core-js": "^2.5.4",
  "rxjs": "^6.0.0",
  "zone.js": "^0.8.26"
 },
"devDependencies": {
  "@angular/compiler-cli": "^6.0.2",
  "@angular-devkit/build-angular": "~0.6.3",
  "typescript": "~2.7.2",
  "@angular/cli": "^6.0.3",
  "@angular/language-service": "^6.0.2",
  "@types/jasmine": "~2.8.6",
  "@types/jasminewd2": "~2.0.3",
  "@types/node": "~8.9.4",
  "codelyzer": "~4.2.1",
  "jasmine-core": "~2.99.1",
  "jasmine-spec-reporter": "~4.2.1",
  "karma": "~1.7.1",
  "karma-chrome-launcher": "~2.2.0",
  "karma-coverage-istanbul-reporter": "~1.4.2",
  "karma-jasmine": "~1.1.1",
  "karma-jasmine-html-reporter": "^0.2.2",
  "protractor": "~5.3.0",
  "ts-node": "~5.0.1",
  "tslint": "~5.9.1"
 }
}

angular.json:

 {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "frontend": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/frontend",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "frontend:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "frontend:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "frontend:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "frontend-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "frontend:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "frontend"
}

Something to go through, and see if anything might help: https://github.com/angular/angular-cli/issues/10661 — R. Richards, May 17 '18 at 23:47
I would remove the lock file(s) and `rm -r node_modules` and reinstall `npm i` before proceeding. I'll watch this question to help more afterwards. — Ben Racicot, Jun 11 '19 at 17:34

score 20 · Answer 1 · answered Jun 30 '18 at 07:24

20

Running ng serve --open after creating and going into my new project "frontend" gave this error:

After creating the project, you need to run

npm install

to install all the dependencies listed in package.json

answered Jun 30 '18 at 07:24

baao

71,625
17
143
203

score 12 · Answer 2 · answered Feb 13 '19 at 10:24

I looked inside node_modules and apparently, only dependencies are installed, not devDependencies. With the new NPM, we need to explicitly get the devDependencies:

npm i --only=dev

If you wish to install just the devkit:

npm install @angular-devkit/build-angular

Joint idea with - ken107(github)

score 5 · Answer 3 · edited May 30 '19 at 21:05

5

If you are using angular version 8 please run the below command to fix this issue.

ng update @angular/cli @angular/core

edited May 30 '19 at 21:05

CertainPerformance

356,069
52
309
320

answered May 30 '19 at 19:35

Sumit Singh Deo

51
1
1

When using code in a question, please put all code into code blocks: usually, indent all code lines by 4 spaces, or surround the code block with 3 backticks (`\`\`\``). For inline code on the same line as non-code, surround the code with a single backtick on each side (`\``). – CertainPerformance May 30 '19 at 21:05

score 3 · Answer 4 · edited Aug 28 '21 at 15:44

3

Use

npm update

or run

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

edited Aug 28 '21 at 15:44

Community

1
1

answered Jan 21 '19 at 05:28

Abdus Salam Azad

5,087
46
35

Syed Kashif · Answer 5 · 2019-07-15T17:23:55.590

3

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

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

edited Jul 15 '19 at 17:23

answered Mar 28 '19 at 12:01

Syed Kashif

420
6
13

2

You should add what this does and how this is different from what OP did (--save-dev, non-global). – m02ph3u5 Mar 28 '19 at 12:24
2

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – undetected Selenium Mar 28 '19 at 15:23
@Learner try this yarn add @angular-devkit/build-angular --dev – Syed Kashif Jul 15 '19 at 17:29
@kashif: Dude, I dont know what the heck is yarn. This command doesnt run in cmd – Jasmine Jul 16 '19 at 14:59

score 2 · Answer 6 · answered Jun 30 '18 at 07:18

Another issue could be with your dev-dependencies. Please check if they have been installed properly (check if they are availabe in the node_modules folder)

If not then a quick fix would be:

npm i --only=dev

Or check how your npm settings are regarding prod:

npm config get production

In case they are set to true - change them to false:

npm config set -g production false

and setup a new angular project.

Found that hint here: https://github.com/angular/angular-cli/issues/10661 (ken107 and lichunbin814)

Hope that helps.

score 2 · Answer 7 · answered Jun 02 '19 at 02:05

2

This worked for me: Type npm audit fix in the commandline. Afterwards I was able to use ng serve --open again.

answered Jun 02 '19 at 02:05

Rob Monhemius

4,822
2
17
49

@Learner Just sharing what was working for me in a similar situation. The other answers didn't work for me at that time, so it may be helpful to some people. I am in no way claiming that it always solves the issue with this error message. – Rob Monhemius Jul 16 '19 at 08:51
This also worked for me as well. npm audit fix --force as a last resort – Mandi Sep 10 '20 at 05:44

score 1 · Answer 8 · answered Jul 04 '18 at 23:01

1

I've just encountered this problem and fixed it. I think the root cause of this problem is ng and current version of node.js (10.6.0) and accompanying npm are not in sync. I've installed the LTS version of node.js (8.11.3) and the problem disappeared.

answered Jul 04 '18 at 23:01

Ergun Coruh

385
3
16

score 0 · Answer 9 · answered Jul 04 '18 at 12:11

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

npm update -g @angular/cli editing my package.json changing the line "@angular/cli": "1.6.0", to "@angular/cli": "^1.6.0", npm update did the trick.

score 0 · Answer 10 · answered Jul 21 '18 at 18:21

D:project/contactlist npm install then D:project/contactlist ng new client

D:project/contactlist/client ng serve

this worked for me for some reason i had to delete the client folder and start npm install from the contactlist folder. i tried every thing even clearing the cache and finally this worked.

score 0 · Answer 11 · answered Feb 06 '19 at 19:20

0

I had the same problem, as it did not installed

@angular-devkit/build-angular

The answer which has worked for me was this:

npm i --only=dev

answered Feb 06 '19 at 19:20

David Bedo

11
6

score 0 · Answer 12 · answered Jul 28 '19 at 15:38

0

If you are updating from angular 7 to angular 8 then do this

ng update @angular/cli @angular/core

for more information read here https://github.com/just-jeb/angular-builders/blob/master/MIGRATION.MD

answered Jul 28 '19 at 15:38

Aman Rai

1

score 0 · Answer 13 · answered Sep 10 '19 at 13:37

0

Run the below command to get it resolved. Whenever you pull a new project, few dependencies wont get added to the working directory. Run the below command to get it resolved

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

answered Sep 10 '19 at 13:37

Manjunatha B

276
3
9

score 0 · Answer 14 · answered Dec 17 '19 at 13:11

I tried all the possible commands listed above and none of them worked for me, Check if Package.json contain "@angular-devkit/build-angular" if not just install it using(in my case version 0.803.19 worked)

npm i @angular-devkit/build-angular@0.803.19

Or checkout at npm website repositories for version selection

score 0 · Answer 15 · answered Oct 18 '20 at 06:32

0

Try to install angular-devkit for building angular projects

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

answered Oct 18 '20 at 06:32

Codemaker2015

12,190
6
97
81

score -1 · Answer 16 · answered Jun 11 '19 at 17:31

-1

did all the above didn't work... may be some issue with NPM

Yarn

was helpful ..

Yarn Install

answered Jun 11 '19 at 17:31

Rohit Kumar

1,777
2
13
26

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

16 Answers16