[node.js] Can not find module “@angular-devkit/build-angular”

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

Angular CLI Quickstart

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

This question is related to node.js angular npm-install package.json angular6

The answer is


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

ng update @angular/cli @angular/core

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/[email protected]

Or checkout at npm website repositories for version selection


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

Yarn 

was helpful ..

Yarn Install

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.


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


Use npm update or, Run `npm install --save-dev @angular-devkit/build-angular

`


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)


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.


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.


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.


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


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


Try to install angular-devkit for building angular projects

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

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


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


From angular 6 you can run the command below to fix that issue

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

OR

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

If your you still can not resolve issues, you can see other option from an unhandled exception occurred: cannot find module '@angular-devkit/build-angular/package.json'


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


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

Examples related to node.js

Hide Signs that Meteor.js was Used Querying date field in MongoDB with Mongoose SyntaxError: Cannot use import statement outside a module Server Discovery And Monitoring engine is deprecated How to fix ReferenceError: primordials is not defined in node UnhandledPromiseRejectionWarning: This error originated either by throwing inside of an async function without a catch block dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.62.dylib error running php after installing node with brew on Mac internal/modules/cjs/loader.js:582 throw err DeprecationWarning: Buffer() is deprecated due to security and usability issues when I move my script to another server Please run `npm cache clean`

Examples related to angular

error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class error TS1086: An accessor cannot be declared in an ambient context in Angular 9 TS1086: An accessor cannot be declared in ambient context @angular/material/index.d.ts' is not a module Why powershell does not run Angular commands? error: This is probably not a problem with npm. There is likely additional logging output above Angular @ViewChild() error: Expected 2 arguments, but got 1 Schema validation failed with the following errors: Data path ".builders['app-shell']" should have required property 'class' Access blocked by CORS policy: Response to preflight request doesn't pass access control check origin 'http://localhost:4200' has been blocked by CORS policy in Angular7

Examples related to npm-install

How to update core-js to core-js@3 dependency? Can not find module “@angular-devkit/build-angular” How do I deal with installing peer dependencies in Angular CLI? NPM Install Error:Unexpected end of JSON input while parsing near '...nt-webpack-plugin":"0' How to solve npm install throwing fsevents warning on non-MAC OS? Why does "npm install" rewrite package-lock.json? What is the difference between npm install and npm run build? How to solve npm error "npm ERR! code ELIFECYCLE" base 64 encode and decode a string in angular (2+) Install specific branch from github using Npm

Examples related to package.json

SyntaxError: Cannot use import statement outside a module Module not found: Error: Can't resolve 'core-js/es6' Can not find module “@angular-devkit/build-angular” Error: EPERM: operation not permitted, unlink 'D:\Sources\**\node_modules\fsevents\node_modules\abbrev\package.json' Field 'browser' doesn't contain a valid alias configuration How do I add a custom script to my package.json file that runs a javascript file? "unexpected token import" in Nodejs5 and babel? Start script missing error when running npm start How to use private Github repo as npm dependency How to set environment variables from within package.json?

Examples related to angular6

Errors: Data path ".builders['app-shell']" should have required property 'class' Can not find module “@angular-devkit/build-angular” Could not find module "@angular-devkit/build-angular" Angular 6 Material mat-select change method removed Http post and get request in angular 6 How to set environment via `ng serve` in Angular 6 Angular - "has no exported member 'Observable'" Angular-cli from css to scss How to pass multiple parameter to @Directives (@Components) in Angular with TypeScript?