【问题标题】:Could not find the implementation for builder @angular-devkit/build-angular:dev-server on ng serve command在 ng serve 命令上找不到构建器 @angular-devkit/build-angular:dev-server 的实现
【发布时间】:2019-10-30 14:00:44
【问题描述】:

我尝试在this 之后更新 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
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"
  }
}

有没有人有其他建议?

【问题讨论】:

    标签: node.js angular npm ecmascript-6 single-page-application


    【解决方案1】:

    我通过重新安装 build-angular 包来完成这项工作。注意安装命令上的“--save-dev”标志:

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

    【讨论】:

    • 我在 @angular-builders/custom-webpack 上遇到了同样的问题,我在安装时添加了 --save-dev 并修复了问题
    【解决方案2】:

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

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

    【讨论】:

      【解决方案3】:

      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 尚未为您更新)

      【讨论】:

        【解决方案4】:

        确保你的 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 文件)。
        【解决方案5】:

        我遇到了同样的问题,但就我而言,我正在尝试提供 Angular 项目的下载模板。起初它在ng serve --open 终端命令之后给了我这个错误。

        发生未处理的异常:

        在“D:\WORK\Desarrollo\plantillas descargadas\argon-dashboard-angular-master”中找不到模块“@angular-devkit/build-angular”。

        我解决了这个堆栈溢出问题:https://stackoverflow.com/a/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 的评论版,很抱歉给您带来麻烦,英语不是我的母语。我只是希望这篇文章有用。
        【解决方案6】:

        由于您收到此错误,您可能正在使用使用旧版本 angular dev 的应用程序,例如 0.6.x

        如果您只是卸载并重新安装,很可能会遇到其他错误,例如“找不到模块'@angular/compiler-cli/src/tooling'”或找不到模块'@angular/compiler-cli/ngcc'因为 Angular 似乎已经做出了很大的改变。

        如果你只是通过更新解决了问题,那么就别想了。

        最好使用不会导致构建错误和ngcc错误的下一个版本(相对于0.6.5)。

        就我而言,正确的版本介于构建错误和 ngcc 错误之间。

        【讨论】:

          【解决方案7】:

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

          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】:

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

            【讨论】:

              【解决方案9】:

              双重检查版本: 我查看了 package.json 并检查了所有 Angular/Webkit 程序的所有版本,删除了那些给我错误的 Typescript 错误,例如 rxjsgooglemaps

              删除package-lock.json。添加所有正确版本的 Angular、Webkit、Typescript 等...检查过去的版本呈现什么。这意味着在 npmjs.com 上查看包的版本历史记录,并按日期/年龄和版本号进行匹配。在package.json 中进行更改并保存。

              "dependencies" {
                  "@agm/core": "1.0.0",
                  "@angular/cdk": "6.1.0",
                  "rxjs": "6.0.0",
                  "rxjs-compat": "6.0.0",
                  ...
              },
              ...
              "devDependencies": {
                  "@angular-devkit/build-angular": "0.6.1",  // old: "^6.1.0", 
                  "@angular/cli": "6.1.0",                   // new: "6.1.0",
                  "@angular/compiler-cli": "6.1.0",
                  "typescript": "2.7.2"
                  ...
              }
              

              通过删除所有旧模块重新开始:

              rm -fR ./node_modules/@angular;rm -fR ./node_modules/@angular-devkit/;rm -fR ./node_modules/typescript;rm -fR ./node_modules/rxjs*;rm package-lock.json;

              然后重新安装: npm install;

              .Pug 模板修复: 我正在使用 .pug 加载程序,所以我必须手动修补:node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js 以允许 Webpack 呈现 Pug 文件。在该文件内的html 规则之后添加这一行:

              { test: /.pug$/, use: [ { loader: "apply-loader" }, { loader: "pug-loader" } ] },.

              这是在模仿 ng-add-pug-loader.js 文件在 Angular 版本 6 中加载 .pug 文件所做的事情。

              【讨论】:

                【解决方案10】:

                这对我有用。

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

                运行此程序时,您可能会得到一个也应该更新的其他包的列表。

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

                在运行 ng serve 之后,angular.json 出现错误,因为缺少 tsconfig.app.json 文件。这些是我从 link 手动添加的。我还添加了tsconfig.spec.json 文件。

                就是这样,我又跑了ng serve,项目编译成功了。

                【讨论】:

                  猜你喜欢
                  • 2019-11-26
                  • 2023-02-16
                  • 1970-01-01
                  • 2020-01-14
                  • 2022-01-05
                  • 2019-10-15
                  • 1970-01-01
                  • 2020-12-28
                  • 2018-10-28
                  相关资源
                  最近更新 更多