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"
}
}
}
5
45 Answers
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
15
Exact same error? And the configuration file? are they same as this question?
Yes. Well, I did some more exploring on this issue. Turns out that it works fine on my Mac Mini, so it will probably has something to do with my Node setup on Windows.
Upgrade to angular 7 – the accepted answer fixed the error (have upvoted), but didn’t solve the upgrade problem overall. This did stackoverflow.com/a/51592138/852806
Thanks for this. I just hit this problem while attempting to follow the Angular tutorial: angular.io/guide/quickstart – seems like someone forgot to update the documentation?
– Dan KingI had to run in adicional the following command: “npm audit fix –force”
npm update
It worked like a charm.
4
I moved to a new machine halfway through the angular-tour-of-heroes tutorial and pulled the half baked work from source control. This fixed it.
Nothing “half baked” about not checking in the
node modulesfolder. 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.– LiamThere might be additional packages that are outdated. Run
ng update --allto try to update all at the same time.– Lonelyafter i cloned my project in another machine i was having this issue, and this solution worked perfectly, thanks
for angular 6 and above
The working solution for me was
npm install
ng update
and finally
npm update
2
When I do the ng update I got several messages about several specific updates needed. Name Version Command to update ——————————————————————————– @angular/core 4.4.7 -> 8.2.4 ng update @angular/core @ngrx/store 2.2.3 -> 8.3.0 ng update @ngrx/store rxjs 5.5.12 -> 6.5.3 ng update rxjs
npm i only without ng update and npm upsdate worked for me (Angular 12). Anyway thank you so much!
Need to explicitly get devDependencies.
npm i --only=dev
1
This worked for me, same answer in: github.com/angular/angular-cli/issues/…
– iizAck
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
1
npm install –save @angular-devkit/build-angular worked for me but only problem was I was trying to run this command from a command prompt which was not run as an administrator, and I entered to execute this command it was not showing any error nothing only cursor was on wait state then I simply run a cmd with admin in it worked. Thanks
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/[email protected]
npm cache clean --force
npm install -g @angular/[email protected]
npm install node-sass -g
ng new MY_PROJECT_NAME
cp -r from_my_old_project to_new_MY_PROJECT_NAME
2
If you are trying to build a library, use
ng new MY_PROJECT_NAME --create-application=falsefor the second-to-last command. I had this error on trying to build a library. The--create-application=falseflag avoids pulling in unnecessary dependencies. (angular.io/guide/creating-libraries#getting-started)– VSOworked for me after clearing the npm cache and installing again
– Braj
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/[email protected]
Step 4: npm i
Step 5: ng build
After that ng serve .I hope definitely your problem will be solved.
1
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 [email protected]
Source Link
1
‘ncu’ is not recognized as an internal or external command, operable program or batch file.
– VivekDev
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
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
1
I had a message saying –allow-dirty not installed. But updated my stuff.
– 13garth
Try this one.
npm install
npm update
if it's shows something like this.
run
npm audit fixto fix them, ornpm auditfor details
Do that!
2
And when you do that, NPM says ‘I sure hope you know what you are doing.’. That gave me the freaks.
upvoted since it helped – although only partially. After doing this I still had some missing peer dependencies which I install following this idea: stackoverflow.com/a/51063840/2995907
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 [email protected]">=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
0
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/corenpm uninstall @angular-devkit/build-angularnpm install --save-dev @angular-devkit/build-angularif this error could not resolve by above command so you update node version
- npm update npm -g
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 ツ
1
This has nothing to do with not being able to find a module. this just means the angular cli module will be updated for any version 1.6.x
– SanSolo
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/[email protected]
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.
working solution for me
Delete node_modules folder.
run npm install
Hope this will work!
- Delete the node_modules.
- Clear the cache using
npm cache clean --verify. - And then
npm installagain.
Works like a charm for me.
Just update the angular version and add the below dependency:
ng update
npm update
npm i @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",
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
1
I used ng –version inside the project. It showed me the list with error. So, it means the list didnt had this package installed properly. When I went outside of the app and checked ng –version, so global one didnt even listed it. So, I guess my yarn installtion didnt install the dev dependencies properly
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.oldsrc*.* YOUR_PROJECT_NAMEsrc /s
This is Windows version of copy, change it based on your own OS.
I deleted the node_modules and package-lock.json folders and then typed npm i on the command line. After that, everything was fine.
sometimes, you might not have node_modules folder at all, maybe fresh clone. run npm install first.
Do you have folder node_modules ? For me the same error happened, when I cloned my Angular project through GitHub on different laptop. I didn’t push folder node_modules to save space. Because I was on cell phone tethering, I decided do not reinstall all packages, but copy node_modules folder from different project on the same laptop. And it worked!
So many identical answers to this question.
@SteveSmith I’ve already flagged a few, but if you notice such answers in the future, you can custom flag them and leave a link to the original answer to get them cleaned up.