Could not find module "@angular-devkit/build-angular"
AngularAngular CliAngular6Angular Cli-V6Angular Problem Overview
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"
}
}
}
Angular Solutions
Solution 1 - Angular
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
Solution 2 - Angular
npm update
It worked like a charm.
Solution 3 - Angular
for angular 6 and above
The working solution for me was
npm install
ng update
and finally
npm update
Solution 4 - Angular
Need to explicitly get devDependencies.
npm i --only=dev
Solution 5 - Angular
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
Solution 6 - Angular
I fixed mine by:
-
Delete node_modules folder.
-
run
npm install
Hope this helped!
Solution 7 - Angular
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
Solution 8 - Angular
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.
Solution 9 - Angular
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
Solution 10 - Angular
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
Solution 11 - 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!
Solution 12 - Angular
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
Solution 13 - Angular
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
Solution 14 - Angular
npm install --save-dev @angular-devkit/build-angular@latest
solved it for me.
Solution 15 - Angular
First delete node_modules
folder
then Restart system
Run npm install --save-dev @angular-devkit/build-angular
and
Run npm install
Solution 16 - Angular
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/
Solution 17 - Angular
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
Solution 18 - Angular
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
Solution 19 - Angular
working solution for me
Delete node_modules folder.
run npm install
Hope this will work!
Solution 20 - Angular
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 ツ
Solution 21 - Angular
Try this first
npm install --save-dev @angular-devkit/build-angular
If some error come again for missing packages try
npm install
Solution 22 - Angular
That's works for me, commit and then:
ng update @angular/cli @angular/core
npm install --save-dev @angular/cli@latest
Solution 23 - Angular
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.
Solution 24 - Angular
npm i --save-dev @angular-devkit/build-angular
This code install @angular-devkit/build-angular
as dev dependency.
100% TESTED.
Solution 25 - 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",
Solution 26 - Angular
- Delete the node_modules.
- Clear the cache using
npm cache clean --verify
. - And then
npm install
again.
Works like a charm for me.
Solution 27 - Angular
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.
Solution 28 - Angular
Just update the angular version and add the below dependency:
ng update
npm update
npm i @angular-devkit/build-angular
Solution 29 - Angular
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
Solution 30 - Angular
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:
- Uninstall node.js via your OS and install it again
npm install -g @angular/cli
- Rename your project to YOUR_PROJECT_NAME.old
ng new YOUR_PROJECT_NAME
- Run this hello world project (
ng serve
) to make sure that you won't get the error. xcopy YOUR_PROJECT_NAME.old\src\*.* YOUR_PROJECT_NAME\src /s
This is Windows version of copy, change it based on your own OS.
Solution 31 - Angular
I had the problem with the newest version of @angular-devkit/build-angular
(as of writing this, 11.0.5 was only released 17 hours ago).
Our Company is using a Nexus Repository Manager as a npm registry (we do not access https://registry.npmjs.org/ directly), the version was so new, that it wasn't included yet in our Nexus yet.
Invalidating the cache of the repository and npm install
fixed the issue.
Solution 32 - Angular
From the ionic forum this worked for me.
npm i @ionic/angular-toolkit@latest
Solution 33 - Angular
-
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/
Solution 34 - Angular
running the following worked for me
npm audit fix --force
Solution 35 - Angular
Delete package-lock.json and do npm install again. It should fix the issue.
** This fix is more suitable when you have created Angular 6 app using ng new and after installing other dependencies you find this error.
Solution 36 - Angular
In my case, the issue is, because of missing dependencies. The dependencies are missing, because I've forgotten to call:
npm install
After calling the above command, all required dependencies are loaded in node_modules
, and that is no more issue
Solution 37 - Angular
Solution 38 - Angular
Try this. It worked for me
npm uninstall -g @angular/cli
npm cache verify
npm install -g @angular/cli@next
Solution 39 - Angular
I try all the answers above, but none of them work to me. I had to downgrade the version of Angular-CLI. I run the command ng --version
and results:
@angular-devkit/architect 0.10.7
@angular-devkit/build-angular 0.10.7
@angular-devkit/build-ng-packagr 0.10.7
@angular-devkit/build-optimizer 0.10.7
@angular-devkit/build-webpack 0.10.7
@angular-devkit/core 7.0.7 <-- notice this!
@angular-devkit/schematics 8.2.1
@angular/cli 8.2.1 <-- and this!
@ngtools/json-schema 1.1.0
@ngtools/webpack 7.0.7
@schematics/angular 8.2.1
@schematics/update 0.802.1
ng-packagr 4.7.1
rxjs 6.3.3
typescript 3.1.6
webpack 4.19.1
I open my package.json and search for the line that define the version of CLI:
...
"devDependencies": {
"@angular-devkit/build-angular": "~0.10.0",
"@angular-devkit/build-ng-packagr": "~0.10.0",
"@angular/cli": "~8.2.0" -- I changed here to ~7.0.7
...}
...
I change the version of @angular/cli
to ~7.0.7. Then run npm uninstall @angular/cli
and install again running npm install -g angular-cli@~7.0.7
Solution 40 - Angular
I resolved this by installing Angular on a 64 bit operating system. I was getting the error because I was initially running it on a 32 bit OS
Solution 41 - Angular
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
Solution 42 - Angular
I didn't have a package.json. Make sure you have one.
Solution 43 - Angular
Try all these 3.
NOTE : Do it inside the project folder :
npm install
ng update
npm update
Solution 44 - Angular
For me, it got worked when I ran the npm install command inside the project folder. Ex: I have shoppingmenu app and I ran the npm install command inside that folder.
Solution 45 - Angular
I just did below and it worked.
npm install --save-dev
Solution 46 - Angular
you npm
version is old, try to run the following command:
npm i npm@latest -g