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

问题

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\"
    }
  }
}

回答1:

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

回答2:

npm update

It worked like a charm.

回答3:

for angular 6 and above

The working solution for me was

npm install

ng update

and finally

npm update

回答4:

Need to explicitly get devDependencies.

npm i --only=dev

回答5:

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

回答6:

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

回答7:

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

回答8:

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!

回答9:

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

回答10:

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

回答11:

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/

回答12:

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 ツ

回答13:

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

回答14:

Try this first

npm install --save-dev @angular-devkit/build-angular

If some error come again for missing packages try

npm install

回答15:

That's works for me, commit and then:

ng update @angular/cli @angular/core
npm install --save-dev @angular/cli@latest

回答16:

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.

回答17:

npm install --save-dev @angular-devkit/build-angular@latest

solved it for me.

回答18:

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

回答19:

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

回答20:

First delete node_modules folder

then Restart system

Run npm install --save-dev @angular-devkit/build-angular

and

Run npm install

回答21:

running the following worked for me npm audit fix --force

回答22:

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

回答23:

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.

回答24:

In my case, the issue is because of missing dependencies. Why dependencies is 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

回答25:

Execute below Command on your CLI :

npm install

回答26:

Delete the node_modules.
Clear the cache using'npm cache clean --verify'.
And then npm install again.

Works like a charm for me.

回答27:

Try this. It worked for me

npm uninstall -g @angular/cli
npm cache verify
npm install -g @angular/cli@next

回答28:

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

回答29:

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.

回答30:

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

来源：https://stackoverflow.com/questions/50333003/could-not-find-module-angular-devkit-build-angular

标签

angular

angular-cli

angular6

angular-cli-v6