ChatGPT解决这个技术问题 Extra ChatGPT

找不到模块“@angular-devkit/build-angular”

更新到 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"
    }
  }
}
我删除了 node_modules 和 package-lock.json 文件夹,然后在命令行中输入了 npm i。在那之后,一切都很好。
有时,您可能根本没有 node_modules 文件夹,也许是新的克隆。先运行 npm install 。
你有文件夹 node_modules 吗?对我来说,当我通过 GitHub 在不同的笔记本电脑上克隆我的 Angular 项目时,发生了同样的错误。我没有推送文件夹 node_modules 以节省空间。因为我正在使用手机网络共享,所以我决定不重新安装所有软件包,而是从同一台笔记本电脑上的不同项目中复制 node_modules 文件夹。它奏效了!
这个问题有很多相同的答案。
@SteveSmith 我已经标记了一些,但是如果您以后发现这样的答案,您可以自定义标记它们并留下指向原始答案的链接以清理它们。

K
Koray Tugay

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

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

或者,

yarn add @angular-devkit/build-angular --dev

完全相同的错误?和配置文件?他们和这个问题一样吗?
是的。好吧,我在这个问题上做了更多的探索。事实证明它在我的 Mac Mini 上运行良好,所以它可能与我在 Windows 上的 Node 设置有关。
升级到 Angular 7 - 接受的答案修复了错误(已投票),但并没有解决整体升级问题。这确实stackoverflow.com/a/51592138/852806
谢谢你。我在尝试遵循 Angular 教程时遇到了这个问题:angular.io/guide/quickstart - 好像有人忘记更新文档了?
我必须在 adicional 中运行以下命令:“npm audit fix --force”
A
Ajay Takur
npm update

它就像一个魅力。


在 angular-tour-of-heres 教程进行到一半时,我搬到了一台新机器上,并从源代码控制中提取了半生不熟的工作。这解决了它。
关于不签入 node modules 文件夹没有什么“半生不熟”的。这只是根据你的 package.json 重建你的节点模块。当您检查新解决方案时,这是完全正常的事情。
可能还有其他包已过时。运行 ng update --all 以尝试同时更新所有内容。
在我在另一台机器上克隆我的项目后,我遇到了这个问题,这个解决方案运行良好,谢谢
这应该是公认的答案。
T
The Dead Man

对于角度 6 及以上

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

npm install

ng update

最后

npm update


当我进行 ng update 时,我收到了几条关于需要几个特定更新的消息。名称 版本 命令更新 --------------------------------------------- ---------------------------------- @angular/core 4.4.7 -> 8.2.4 ng更新@角度/核心 @ngrx/store 2.2.3 -> 8.3.0 ng 更新 @ngrx/store rxjs 5.5.12 -> 6.5.3 ng 更新 rxjs
npm i 仅在没有 ng update 和 npm upsdate 的情况下为我工作(Angular 12)。无论如何,非常感谢!
s
sachq

需要显式获取 devDependencies。

npm i --only=dev

这对我有用,同样的答案:github.com/angular/angular-cli/issues/…
g
grg

如果以下命令不起作用,

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

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

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

npm install --save @angular-devkit/build-angular 为我工作,但唯一的问题是我试图从不是以管理员身份运行的命令提示符运行此命令,并且我输入执行此命令它没有显示任何错误只有光标处于等待状态然后我只需运行一个带有管理员的 cmd 就可以了。谢谢
S
Stanley Mohlala

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

删除 node_modules 文件夹。运行 npm 安装

希望这有帮助!


S
Soft Dev Ahmad yar khan

请遵循这 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。我希望您的问题一定会得到解决。


在浏览器类型 cmd 中打开:ng servre --o
D
Dinesh Pallapa

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

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

如果您尝试构建库,请使用 ng new MY_PROJECT_NAME --create-application=false 作为倒数第二个命令。我在尝试构建库时遇到此错误。 --create-application=false 标志避免引入不必要的依赖项。 (angular.io/guide/creating-libraries#getting-started)
清除 npm 缓存并再次安装后为我工作
C
Code Spy

对于角 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

来源Link


'ncu' 不是内部或外部命令、可运行程序或批处理文件。
T
Thisuri

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


E
Elshan

试试这个。

npm install

npm update

if it's shows something like this. 

运行 npm audit fix 来修复它们,或运行 npm audit 以获取详细信息

去做!


当你这样做时,NPM 会说“我当然希望你知道自己在做什么。”。这给了我怪胎。
赞成,因为它有帮助 - 虽然只是部分。这样做之后,我仍然有一些缺少的对等依赖项,我按照这个想法安装了这些依赖项:stackoverflow.com/a/51063840/2995907
Ε
Ε Г И І И О

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

npm uninstall @angular-devkit/build-angular
npm install @angular-devkit/build-angular
ng update --all --allow-dirty --force

我有一条消息说--allow-dirty 未安装。但是更新了我的东西。
P
Prashant Pimpale

以下命令有效:

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

L
Lexy Feito
npm install --save-dev @angular-devkit/build-angular@latest

为我解决了。


P
Pullat Junaid

首先删除 node_modules 文件夹

然后重启系统

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

运行 npm install


T
Tibin Thomas

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

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


K
Kshitij Shukla

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

这将起作用

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

npm install

R
Rajnikant Lodhi

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

ng 更新 @angular/cli @angular/core

npm卸载@angular-devkit/build-angular

npm install --save-dev @angular-devkit/build-angular 如果上述命令无法解决此错误,则更新节点版本 npm update npm -g

npm 更新 npm -g


N
Naeem Bashir

为我工作的解决方案

Delete node_modules folder.

run npm install

希望这会奏效!


佚名

就在一分钟前,我遇到了同样的问题。我的项目是使用 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

希望我的帮助有效ツ


这与找不到模块无关。这只是意味着 Angular cli 模块将针对任何版本 1.6.x 进行更新
S
Sudheer Muhammed

先试试这个

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

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

npm install

A
Andrey

这对我有用,提交然后:

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

v
v.nivuahc

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

npm link @angular/cli

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


c
cactuschibre

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

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

100% 测试。


P
Prasenjit Mahato

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

ng update

npm update

npm i @angular-devkit/build-angular

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


S
Stephane

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

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

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

在执行 ng build 时,我收到了一些类似的错误消息:

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

angular.json 文件中,我必须更改构建器属性:

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

和:

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

J
JoSSte

转到您创建角度项目的文件夹并删除 node_modules 文件夹。现在打开命令提示符并输入您要使用 cd 运行的项目。输入命令

npm i

npm install

现在命令提示符将开始在项目中安装新的 node_modules 文件。安装 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/


D
Divya Pusuluru

删除节点模块。

使用 npm cache clean --verify 清除缓存。

然后再次 npm install 。

对我来说就像一个魅力。


O
Osama Rizwan

我遇到了同样的问题。

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

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

Angular NEEDS 语义 versioning(也读作 Semver)包含三个部分。


j
juzraai

自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

我在项目中使用了 ng --version 。它向我显示了错误列表。因此,这意味着该列表没有正确安装此软件包。当我走出应用程序并检查 ng --version 时,全局的甚至没有列出它。所以,我猜我的纱线安装没有正确安装开发依赖项

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

领先一步获取最新的外包任务吗?

立即订阅