Could not find module “@angular-devkit/build-angular”

  • A+
Category:Languages

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)].(https://github.com/akveo/ngx-admin) 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

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: