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"
}
}
}
This question is related to
angular
angular-cli
angular6
angular-cli-v6
The answer is
npm update
It worked like a charm.
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.
I fixed mine by:
Delete node_modules folder.
run
npm install
Hope this helped!
Try this first
npm install --save-dev @angular-devkit/build-angular
If some error come again for missing packages try
npm install
Node Package Manager does not install devDependencies, whenever you run npm install. Rather what it does is that it installs all the dependencies. So you just have to copy the contents of DevDependencies to Dependencies in package.json, which will force the manager to install those libraries. After copying all the DevDependencies to Dependencies, just run the command npm install, then proceed with ng serve and BOOM its up and running!!!
I hope it helps.
Thank you
add @angular-devkit/build-angular under your dev dependency and it will work, or you can also execute
npm install --save-dev @angular-devkit/build-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.
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!
you npm version is old, try to run the following command:
npm i npm@latest -g
I didn't have a package.json. Make sure you have one.
From the ionic forum this worked for me.
npm i @ionic/angular-toolkit@latest
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
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.
Simple solution
Hit below commend only to fix this error
npm install --save-dev @angular-devkit/build-angular
Just update the angular version and add the below dependency:
ng update
npm update
npm i @angular-devkit/build-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
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
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
- Delete the node_modules.
- Clear the cache using
npm cache clean --verify. - And then
npm installagain.
Works like a charm for me.
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.
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
Try this. It worked for me
npm uninstall -g @angular/cli
npm cache verify
npm install -g @angular/cli@next
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
That's works for me, commit and then:
ng update @angular/cli @angular/core
npm install --save-dev @angular/cli@latest
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
First delete node_modules folder
then Restart system
Run npm install --save-dev @angular-devkit/build-angular
and
Run npm install
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.
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
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 had the same issue with Angular 7. Just executed the following command and error was solved.
npm install --save-dev @angular-devkit/build-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
npm i --save-dev @angular-devkit/build-angular
This code install @angular-devkit/build-angular as dev dependency.
100% TESTED.
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 ?
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
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
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.
Need to explicitly get devDependencies.
npm i --only=dev
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
Execute below Command on your CLI :
- npm install
I just did below and it worked.
npm install --save-dev
npm install --save-dev @angular-devkit/build-angular@latest
solved it for me.
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.
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/
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/cli@latest
npm install node-sass -g
ng new MY_PROJECT_NAME
cp -r from_my_old_project to_new_MY_PROJECT_NAME
running the following worked for me
npm audit fix --force
for angular 6 and above
The working solution for me was
npm install
ng update
and finally
npm update
Source: Stackoverflow.com