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
.
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
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
Source: Stackoverflow.com