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"
}
}
}
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
npm update
It worked like a charm.
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.
ng update --all
to try to update all at the same time.
for angular 6 and above
The working solution for me was
npm install
ng update
and finally
npm update
Need to explicitly get devDependencies.
npm i --only=dev
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
I fixed mine by:
Delete node_modules folder. run npm install
Hope this helped!
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.
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/cli@6.0.8
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
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)
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 typescript@3.5.3
Source Link
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
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!
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
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
npm install --save-dev @angular-devkit/build-angular@latest
solved it for me.
First delete node_modules
folder
then Restart system
Run npm install --save-dev @angular-devkit/build-angular
and
Run npm install
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/
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
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
npm update npm -g
working solution for me
Delete node_modules folder.
run npm install
Hope this will work!
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 ツ
Try this first
npm install --save-dev @angular-devkit/build-angular
If some error come again for missing packages try
npm install
That's works for me, commit and then:
ng update @angular/cli @angular/core
npm install --save-dev @angular/cli@latest
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.
npm i --save-dev @angular-devkit/build-angular
This code install @angular-devkit/build-angular
as dev dependency.
100% TESTED.
Just update the angular version and add the below dependency:
ng update
npm update
npm i @angular-devkit/build-angular
https://www.npmjs.com/package/@angular-devkit/build-angular
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",
go to the folder where u created the angular project and the delete the node_modules folder. Now open the command prompt and enter in the project which u want to run using cd. Enter the command
npm i
OR
npm install
Now the command prompt will start installing the new node_modules files in the project. When the node_modules gets installed then, run the project using command
ng s --o
If the above method not worked then their is some mismatch of the version in npm and then try to install the node_modules.
npm update
Generally this method should work if not worked then try to run this command:
npm install --save-dev @angular-devkit/build-angular
Details and alternative solution https://learnprogramo.com/could-not-find-module-angular-devkit-build-angular-resolved/
Delete the node_modules.
Clear the cache using npm cache clean --verify.
And then npm install again.
Works like a charm for me.
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.
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
Success story sharing