ng serve命令中找不到@angular-devkit/build-angular:dev-server构建器的实现

113

我尝试按照这个链接更新Angular CLI,但现在我不能运行我的应用程序。当我尝试运行命令ng serve时,它会给我这个错误:

Could not find the implementation for builder @angular-devkit/build-angular:dev-server
Error: Could not find the implementation for builder @angular-devkit/build-angular:dev-server
    at WorkspaceNodeModulesArchitectHost.resolveBuilder (C:\Users\Lupus\Documents\full-stack-projects\financial-app-ui\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js:49:19)
    at ServeCommand.initialize (C:\Users\Lupus\Documents\full-stack-projects\financial-app-ui\node_modules\@angular\cli\models\architect-command.js:135:55)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:745:11)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:743:3)

我尝试了我能找到的一切。

  • 我尝试使用命令npm install --save-dev @angular-devkit/build-angular手动安装devkit
  • 我尝试运行命令npm i --only=dev
  • 我尝试运行这些命令

:


  • 我尝试使用命令npm install --save-dev @angular-devkit/build-angular手动安装devkit。
  • 我尝试运行命令npm i --only=dev
  • 我尝试运行这些命令。

:

npm install
ng update
npm update
  • 删除了node_modules文件夹和package-lock.json文件,然后重新运行了所有命令。

没有任何作用。 运行ng v给我这个:

Angular CLI: 8.0.3
Node: 10.15.0
OS: win32 x64
Angular: 8.0.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.9
@angular-devkit/build-angular     0.13.9
@angular-devkit/build-optimizer   0.13.9
@angular-devkit/build-webpack     0.13.9
@angular-devkit/core              7.3.9
@angular-devkit/schematics        8.0.3
@angular/cli                      8.0.3
@ngtools/webpack                  7.3.9
@schematics/angular               8.0.3
@schematics/update                0.800.3
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.29.0

我的 package.json 文件如下:

{
  "name": "financial-app-ui",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.0.1",
    "@angular/cdk": "^8.0.1",
    "@angular/common": "^8.0.1",
    "@angular/compiler": "^8.0.1",
    "@angular/core": "^8.0.1",
    "@angular/forms": "^8.0.1",
    "@angular/platform-browser": "^8.0.1",
    "@angular/platform-browser-dynamic": "^8.0.1",
    "@angular/router": "^8.0.1",
    "core-js": "^2.6.9",
    "font-awesome": "^4.7.0",
    "primeicons": "^1.0.0",
    "primeng": "^7.1.3",
    "rxjs": "~6.5.2",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.9",
    "@angular/cli": "^8.0.3",
    "@angular/compiler-cli": "^8.0.1",
    "@angular/language-service": "^8.0.1",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.4.5"
  }
}

还有其他建议吗?

12个回答

133

我通过重新安装build-angular包来解决了这个问题。请注意安装命令中的'--save-dev'标志:

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

我在@angular-builders/custom-webpack遇到了同样的问题。我在安装时添加了--save-dev并解决了这个问题。 - Toby Simmerling
以下内容与程序开发相关:在我遇到的以下错误信息中,这个方法对我管用了:未经处理的异常:无法找到构建器@angular-devkit/build-angular:protractor的实现。 - orberkov
2
我遇到了一些关于缺少Python的愚蠢错误,Angular/Node跟Python有什么关系。Ng比我的第一个项目有更多的依赖项。 - jodoro

23

通过使用以下命令解决了我的问题:

ng update @angular/cli @angular/core --allow-dirty --force

如果有的话,它将升级项目版本到最新版。 - withoutOne

23

我能够通过使用以下命令安装@angular-devkit/build-angular软件包来解决这个问题:

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

13

我遇到了同样的问题。只需要两个命令就解决了我的问题。

npm uninstall @angular-devkit/build-angular

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

如果这不起作用,别担心。运行这个命令。

ng update @angular/cli @angular/core --allow-dirty --force

8

ng update 应该已经更新了 @angular-devkit/build-angular的版本。

我也遇到了这个问题,我的解决方法是创建了一个新的 Angular 应用,并确保 ng serve 对于这个新创建的 Angular 应用可以正常工作。然后从工作的 Angular 应用的 package.json 中复制并使用以下内容:

`"@angular-devkit/build-angular": "~0.802.2",`

请确保您运行了npm install

(每次 Angular 更新后,版本很可能会改变 - 因此,请按照我所概述的步骤检查您需要使用的版本 - 如果 ng update 没有为您更新它)


7

请确保在您的angular.json配置文件中具有此配置

    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "angular8:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "angular8:build:production"
        }
      }
    }

请确保您已安装此软件包。
@angular-devkit/build-angular

如果您已将项目更新为使用较新的Angular版本,则还需要更新angular.json文件(因为每个Angular版本都可以使用不同的Angular.json配置)。最简单的方法是使用新的Angular版本创建一个新项目,并复制其angular.json文件。 - Renato Probst

4

我遇到了同样的问题,但我的情况是在服务器上提供一个已下载的Angular项目模板。一开始,在执行ng serve --open命令后,它给了我这个错误:

发生了未处理的异常:

无法从“D:\ WORK \ Desarrollo \ plantillas descargadas \ argon-dashboard-angular-master”找到模块“@ angular-devkit / build-angular”。

我通过遵循这篇Stack Overflow帖子解决了这个问题:https://dev59.com/COk5XIcBkEYKwwoY7eQE#50333128,但出现了以下警告:

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN @ngtools/webpack@7.3.1 requires a peer of @angular/compiler-cli@>=5.0.0 
<8.0.0 || ^7.0.0-beta.0 but none is installed. You must install peer dependencies 
yourself.
npm WARN ajv-keywords@3.4.1 requires a peer of ajv@^6.9.1 but none is installed. You 
must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 
(node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for 
fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: 
{"os":"win32","arch":"x64"})

但是,当我尝试运行该命令后,出现了以下错误:

ng serve --open

发生未处理异常: 无法找到@angular-devkit/build-angular:dev-server的构建实现。

我注意到我的node_modules文件夹中缺少一些文件,可能是由于当前连接速度引起的。无论如何,我在另一台计算机上尝试了一下,在其他地方打开了该项目的克隆,并运行了以下命令:

npm update

然后将项目打包成.rar文件,传输到我的工作电脑并解压缩。启动我的VS Code,一切都完美无误地运行了。


感谢@Brian的评论编辑,很抱歉给您带来了麻烦,英语不是我的母语。我只是希望这篇文章能够有用。 - NUKE

3
如果您的计算机已安装npm 7+,请在终端中尝试以下命令:
npm install --legacy-peer-deps,而不是使用npm install,然后运行ng serve。

我曾经遇到过相同的问题,当我在旧版本上构建项目时,上述解决方案都无法帮助我。最终,我找到了解决方法,并与大家分享。

我也遇到了同样的问题,这个命令也解决了它:npm install --save-dev @angular-devkit/build-angular --legacy-peer-deps堆栈跟踪如下: ... npm ERR! node_modules/@angular/common npm ERR! peer @angular/common@"^12.0.0 || ^13.0.0-0" from ...... npm ERR! 修复上游依赖冲突,或者使用 --force 或 --legacy-peer-deps 选项重试该命令,接受一个不正确(可能损坏)的依赖解析。 - undefined

3
在 angular.json 中将这行 "builder": "@angular-builders/build-angular:browser", 改为 "builder": "@angular-devkit/build-angular:browser", 解决了我的问题。

2

这对我很有用。

首先运行更新命令,即ng update

运行此命令时,您可能会得到其他应该更新的软件包列表。

enter image description here

按照建议手动安装这些软件包。

之后,在运行ng serve时,我在angular.json文件中遇到了缺少tsconfig.app.json文件的错误。于是我从这个链接手动添加了它们。我还添加了tsconfig.spec.json文件。

就这样,我再次运行ng serve,项目成功编译。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接