817

更新到 Angular 6.0.1 后,我收到以下错误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说一切都井井有条。删除node_modules文件夹和全新npm install安装也无济于事。

我的项目基于ng2-admin(Angular4 version)。这是我的 package.json 依赖项:

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

和我的 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"
    }
  }
}
4

45 回答 45

1257

@angular-devkit/build-angular作为开发依赖安装。这个包是 Angular 6.0 中新引入的

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

或者,

yarn add @angular-devkit/build-angular --dev
于 2018-05-14T14:44:57.863 回答
264
npm update

它就像一个魅力。

于 2018-07-29T15:47:16.883 回答
129

对于角度 6 及以上

对我来说可行的解决方案是

npm install

ng update

最后

npm update

于 2018-11-07T13:42:56.127 回答
36

需要显式获取 devDependencies。

npm i --only=dev
于 2018-08-10T04:16:23.513 回答
23

如果以下命令不起作用,

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

然后移动到项目文件夹并运行以下命令:

npm install --save @angular-devkit/build-angular
于 2018-05-20T06:58:18.080 回答
19

我通过以下方式修复了我的:

  1. 删除 node_modules 文件夹。

  2. npm install

希望这有帮助!

于 2020-03-05T07:28:54.530 回答
15

以上所有答案都是正确的,但它们对我不起作用。我能够完成这项工作的唯一方法是按照步骤/命令:

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
于 2018-06-30T06:11:55.853 回答
15

请遵循这 5 个步骤,它肯定有效。(我的个人经验)

步骤1:npm uninstall -g @angular/cli

第2步: npm cache clean --force

第 3 步: npm install -g @angular/cli@latest

第4步: npm i

第 5 步: ng build

在那之后ng serve。我希望你的问题一定会得到解决。

于 2020-06-06T07:46:02.700 回答
11

对于角 8

安装npm-check-updates

跑:

$ npm i npm-check-updates
$ ncu -u
$ npm install

此软件包将更新所有软件包并解决此问题

注意:更新后如果您遇到此问题:

Angular 编译器中的错误需要 TypeScript >=3.4.0 和 <3.6.0,但找到了 3.6.3。

然后运行:

$ npm install typescript@3.5.3

来源链接

于 2019-09-16T09:34:22.793 回答
9

npm install 只需键入npm install并运行。然后项目将运行而不会出现错误。或者你可以使用npm install --save-dev @angular-devkit/build-angular

于 2018-09-01T08:52:29.303 回答
8

试试这个。

npm install

npm update

if it's shows something like this. 

运行npm audit fix以修复它们,或npm audit了解详细信息

去做!

于 2018-09-13T01:46:08.100 回答
8

以下对我有用。不幸的是,没有其他任何事情发生。

npm uninstall @angular-devkit/build-angular
npm install @angular-devkit/build-angular
ng update --all --allow-dirty --force
于 2019-09-07T14:33:35.340 回答
6

以下命令有效:

npm install
ng update

-您可能会看到消息“我们分析了您的 package.json,一切似乎都井井有条。干得好!”

npm update

然后尝试开发构建

ng build 

我收到类型脚本的错误,降级为

npm install typescript@">=3.1.1 <3.2

ng build --prod 

产品构建的所有成功。

下面是工作组合

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
于 2018-12-03T16:58:00.923 回答
5

首先删除node_modules文件夹

然后重启系统

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

npm install

于 2019-09-26T09:00:48.790 回答
5
npm install --save-dev @angular-devkit/build-angular@latest

为我解决了。

于 2019-06-19T19:47:34.000 回答
4

当 Angular 项目未完全配置时,通常会发生此错误。

这将起作用

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

npm install
于 2019-05-13T07:31:33.333 回答
4

只需执行以下命令,错误就解决了

  • ng update @angular/cli @angular/core
  • npm uninstall @angular-devkit/build-angular
  • npm install --save-dev @angular-devkit/build-angular

    如果上述命令无法解决此错误,则更新节点版本

    • npm 更新 npm -g
于 2019-07-12T06:46:37.907 回答
4

当我们运行类似的命令时ng serve,它使用@angular/cli 的本地版本。因此,首先在本地安装最新版本的 @angular/cli(不带 -g 标志)。ng update @angular/cli然后使用命令更新 cli 。我认为这应该可以解决问题。谢谢

如果您要更新 Angular 项目https://update.angular.io/ ,此链接可能会对您有所帮助

于 2018-10-04T06:09:04.620 回答
3

在将节点从 v9 升级到 v10 后,我今天遇到了同样的问题。
我的环境是由 docker 设置的,我不得不从我的 DockerFile 中删除这个命令:

npm link @angular/cli

它创建指向安装节点的目录的符号链接。
我猜其中的angular/cli模块与我项目的 node_modules 目录中的模块版本不同,这会导致问题。

于 2019-06-04T15:48:12.857 回答
3

为我工作的解决方案

Delete node_modules folder.

run npm install

希望这会奏效!

于 2021-03-23T18:34:18.290 回答
3

就在一分钟前,我遇到了同样的问题。我的项目是使用 angular-cli 的 v 1.6.0 生成的。

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

希望我的帮助有效ツ</p>

于 2018-12-20T10:58:45.743 回答
3

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

此代码安装@angular-devkit/build-angular为开发依赖项。

100% 测试。

于 2020-08-18T20:29:37.927 回答
3

这对我有用,提交然后:

ng update @angular/cli @angular/core
npm install --save-dev @angular/cli@latest
于 2019-05-30T20:46:21.647 回答
3

我有一个在旧版本的 Angular 中创建的库。

现在我升级到最新版本 11,构建将失败。

事实上,建造者已经改变了。

ng build我做一个有点类似的错误信息时:

Cannot find module '@angular-devkit/build-ng-packagr/package.json'

angular.json文件中,我必须更改 builder 属性:

"builder": "@angular-devkit/build-ng-packagr:build",

和:

"builder": "@angular-devkit/build-angular:ng-packagr",
于 2020-11-19T18:43:58.907 回答
3

先试试这个

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

如果由于缺少软件包而再次出现错误,请尝试

npm install
于 2019-05-09T10:24:29.317 回答
2

只需更新角度版本并添加以下依赖项:

ng update

npm update

npm i @angular-devkit/build-angular

https://www.npmjs.com/package/@angular-devkit/build-angular

于 2020-09-17T10:13:55.367 回答
2

我遇到了同样的问题。

令人惊讶的是,这只是因为version指定package.json的格式不是预期的格式。

我从版本切换"version": "0.1""version": "0.0.1"并解决了问题。

Angular 需要语义版本控制(也称为 Semver),包含三个部分。

于 2020-08-24T12:07:58.687 回答
2
  • 删除节点模块。
  • 使用 清除缓存npm cache clean --verify
  • 然后再npm install一次。

对我来说就像一个魅力。

于 2019-02-26T12:04:25.533 回答
1

不幸的是,所提供的解决方案都不适合我,但 grepit 的回答启发了我执行以下步骤。我通过我的操作系统(Windows 10)卸载了 node.js 并再次安装了它。然后安装 Angular CLI。然后创建了一个新项目,并将我旧项目的 src 文件复制到这个新项目中,错误就消失了。

以下是说明:

  1. 通过您的操作系统卸载 node.js 并重新安装
  2. npm install -g @angular/cli
  3. 将您的项目重命名为 YOUR_PROJECT_NAME.old
  4. ng new YOUR_PROJECT_NAME
  5. 运行这个 hello world 项目 ( ng serve) 以确保您不会收到错误。
  6. xcopy YOUR_PROJECT_NAME.old\src\*.* YOUR_PROJECT_NAME\src /s
    这是Windows版本的副本,根据您自己的操作系统更改它。
于 2019-06-10T07:52:07.543 回答
1

自2天以来,我一直面临同样的问题。

ng -v :6.0.8
node -v :8.11.2
npm -v :6.1.0

确保您位于angular.json安装的文件夹中。进入并输入ng serve。如果问题仍然存在,那么您仅在node_modules. 键入以下内容,它将起作用:

npm i --only=dev
于 2018-07-01T13:31:13.800 回答
1

从离子论坛这对我有用。

npm i @ionic/angular-toolkit@latest
于 2021-02-04T17:12:03.867 回答
1

我遇到了最新版本的问题@angular-devkit/build-angular(截至撰写本文时,11.0.5 仅在 17 小时前发布)。

我们公司使用 Nexus Repository Manager 作为 npm 注册表(我们不直接访问https://registry.npmjs.org/),版本太新了,还没有包含在我们的 Nexus 中。

使存储库缓存无效并修复了该问题。npm install

于 2020-12-18T09:38:41.857 回答
1
  1. 转到您创建角度项目的文件夹并删除 node_modules 文件夹。

  2. 现在打开命令提示符并输入您要使用 cd 运行的项目。

  3. 输入命令

npm i
或者
npm install

  1. 现在命令提示符将开始在项目中安装新的node_modules文件。

  2. 安装 node_modules后,使用命令运行项目

ng s --o

如果上述方法不起作用,则它们是 npm 中的版本不匹配,然后尝试安装 node_modules。

npm update

一般来说,如果不工作,这个方法应该可以工作,然后尝试运行这个命令:

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

详细信息和替代解决方案https://learnprogramo.com/could-not-find-module-angular-devkit-build-angular-resolved/

于 2022-01-09T13:35:26.577 回答
0

删除 package-lock.json 并再次执行 npm install。它应该解决问题。

** 当您使用 ng new 创建 Angular 6 应用程序并在安装其他依赖项后发现此错误时,此修复更适合。

于 2018-09-08T21:17:08.213 回答
0

运行以下对我有用 npm audit fix --force

于 2018-08-18T00:51:41.277 回答
0

我没有 package.json。确保你有一个。

于 2020-10-07T15:43:26.133 回答
0

借助以下命令,您的应用程序将按照我提到的运行每个命令的方式运行

 1.npm list -g --depth=0
 2.npm i npm-check-updates
 3.npm install

最后,运行以下命令在浏览器中打开您的项目

ng serve --open
于 2020-06-29T09:03:31.173 回答
0

就我而言,问题在于缺少依赖项。缺少依赖项,因为我忘记调用:

npm install

调用上面的命令后,所有需要的依赖都加载进去了node_modules,就没有问题了

于 2018-11-22T21:03:04.977 回答
0

我尝试了上面所有的答案,但没有一个对我有用。我不得不降级 Angular-CLI 的版本。我运行命令ng --version和结果:

@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

我打开我的 package.json 并搜索定义 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
...}
...

我将版本更改@angular/cli~7.0.7。然后运行npm uninstall @angular/cli并再次运行安装npm install -g angular-cli@~7.0.7

于 2019-08-12T19:23:00.453 回答
0

解决方案

在 CLI 上执行以下命令:

  • npm 安装
于 2019-02-06T06:34:32.770 回答
0

尝试这个。它对我有用

npm uninstall -g @angular/cli
npm cache verify
npm install -g @angular/cli@next
于 2019-04-10T05:05:54.730 回答
0

我通过在 64 位操作系统上安装 Angular 解决了这个问题。我收到错误是因为我最初是在 32 位操作系统上运行它

于 2020-05-11T08:30:35.253 回答
-1

对我来说,当我在项目文件夹中运行 npm install 命令时,它就起作用了。例如:我有 shoppingmenu 应用程序,我在该文件夹中运行了 npm install 命令。

于 2020-11-19T16:59:19.337 回答
-2

我刚刚在下面做了,它奏效了。

npm install --save-dev
于 2021-01-26T07:28:02.303 回答
-5

npm的版本旧,请尝试运行以下命令:

npm i npm@latest -g
于 2018-06-28T02:38:39.377 回答