npm - Angular 8 更新后 ng 服务无法正常工作

Question

错误

Could not find the implementation for builder @angular-devkit/build-angular:dev-server

         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 (D:\angular-tour-of-heroes\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js:49:19)
            at ServeCommand.initialize (D:\angular-tour-of-heroes\node_modules\@angular\cli\models\architect-command.js:135:55)
            at async ServeCommand.validateAndRun (D:\angular-tour-of-heroes\node_modules\@angular\cli\models\command.js:127:9)
            at async Object.runCommand (D:\angular-tour-of-heroes\node_modules\@angular\cli\models\command-runner.js:178:24)
            at async default_1 (D:\angular-tour-of-heroes\node_modules\@angular\cli\lib\cli\index.js:32:31)

NG版本

              Angular CLI: 8.0.3
                Node: 12.4.0
                OS: win32 x64
                Angular: 7.2.2
                ... animations, cdk, common, compiler, core, forms, http
                ... platform-browser, platform-browser-dynamic, router
                ... service-worker

                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              8.0.3
                @angular-devkit/schematics        8.0.3
                @angular/cli                      8.0.3
                @angular/compiler-cli             7.2.15
                @angular/language-service         7.2.15
                @angular/material                 7.3.7
                @angular/pwa                      0.800.3
                @ngtools/webpack                  7.3.9
                @schematics/angular               8.0.3
                @schematics/update                0.13.9
                rxjs                              6.3.3
                typescript                        3.2.4
                webpack                           4.29.0

打包Json

                            {
                      "name": "angular-tour-of-heroes",
                      "version": "0.0.0",
                      "license": "MIT",
                      "private": true,
                      "dependencies": {
                        "@angular/animations": "7.2.2",
                        "@angular/cdk": "~7.2.2",
                        "@angular/common": "7.2.2",
                        "@angular/compiler": "7.2.2",
                        "@angular/core": "7.2.2",
                        "@angular/forms": "7.2.2",
                        "@angular/http": "7.2.2",
                        "@angular/material": "^7.2.2",
                        "@angular/platform-browser": "7.2.2",
                        "@angular/platform-browser-dynamic": "7.2.2",
                        "@angular/pwa": "^0.800.3",
                        "@angular/router": "7.2.2",
                        "@angular/service-worker": "7.2.2",
                        "angular-datatables": "^7.0.0",
                        "angular-in-memory-web-api": "0.8.0",
                        "angular2-datatable": "^0.6.0",
                        "bootstrap": "^4.3.1",
                        "core-js": "2.6.3",
                        "datatables.net": "^1.10.19",
                        "datatables.net-buttons": "^1.5.6",
                        "datatables.net-buttons-dt": "^1.5.6",
                        "datatables.net-dt": "^1.10.19",
                        "hammerjs": "^2.0.8",
                        "jasmine-core": "3.3.0",
                        "jasmine-marbles": "0.4.1",
                        "jquery": "^3.4.1",
                        "jszip": "^3.2.1",
                        "ng-select2": "^1.0.8",
                        "ng2-select2": "^1.0.0-beta.16",
                        "ngx-bootstrap": "^3.2.0",
                        "rxjs": "6.3.3",
                        "rxjs-compat": "^6.3.3",
                        "select2": "^4.0.6-rc.1",
                        "tslib": "^1.9.0",
                        "web-animations-js": "2.3.1",
                        "zone.js": "0.8.29"
                      },
                      "scripts": {
                        "ng": "ng",
                        "start": "ng serve",
                        "build": "ng build",
                        "test": "ng test",
                        "lint": "ng lint",
                        "e2e": "ng e2e"
                      },
                      "devDependencies": {
                        "@angular-devkit/build-angular": "^0.13.9",
                        "@angular-devkit/core": "^8.0.3",
                        "@angular/cli": "^8.0.3",
                        "@angular/compiler-cli": "^7.2.7",
                        "@angular/language-service": "~7.2.2",
                        "@types/datatables.net": "^1.10.15",
                        "@types/datatables.net-buttons": "^1.4.1",
                        "@types/jasmine": "~3.3.8",
                        "@types/jasminewd2": "^2.0.6",
                        "@types/jquery": "^3.3.29",
                        "@types/node": "~10.12.18",
                        "codelyzer": "~4.5.0",
                        "jasmine-spec-reporter": "~4.2.1",
                        "karma": "^4.0.1",
                        "karma-chrome-launcher": "~2.2.0",
                        "karma-coverage-istanbul-reporter": "~2.0.1",
                        "karma-jasmine": "^2.0.1",
                        "karma-jasmine-html-reporter": "^1.4.0",
                        "protractor": "~5.4.0",
                        "ts-node": "~8.0.1",
                        "tslint": "~5.12.1",
                        "typescript": "~3.2.4"
                      }
                    }

我尝试过的解决方案

  remove node_module,package-lock.json
  npm install --save-dev @angular-devkit/build-angular
  npm install
  npm update
  npm install -g typescript@latest

我尝试更新

                PS D:\angular-tour-of-heroes> ng update
            Using package manager: 'npm'
            Collecting installed dependencies...
            Found 58 dependencies.
                We analyzed your package.json, there are some packages to update:

                  Name                               Version                  Command to update
                 --------------------------------------------------------------------------------
                  @angular/cdk                       7.2.2 -> 8.0.1           ng update @angular/cdk
                  @angular/core                      7.2.15 -> 8.0.1          ng update @angular/core
                  @angular/core                      7.2.2 -> 7.2.15          ng update @angular/core
                  @angular/material                  7.3.7 -> 8.0.1           ng update @angular/material
                  rxjs                               6.3.3 -> 6.5.2           ng update rxjs


                There might be additional packages that are outdated.
                Run "ng update --all" to try to update all at the same time.

            PS D:\angular-tour-of-heroes> ng update @angular/cdk
            Repository is not clean.  Please commit or stash any changes before updating.
   npm cache verify

我尝试过更新 Node/Npm 版本

      node -v
      v12.4.0
      npm -v
      6.9.0

我还关注了链接Could not find module "@angular-devkit/build-angular"

Angular Guide for upgrade https://update.angular.io/#7.0:8.0

 D:\angular-tour-of-heroes> ng update @angular/cli @angular/core
   Repository is not clean.  Please commit or stash any changes before updating.

After fixing git issue

        PS D:\angular-tour-of-heroes> ng update --all
        Using package manager: 'npm'
        Collecting installed dependencies...
        Found 58 dependencies.
                          Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.2")
                          Package "@angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=3.1 < 3.5", would install "3.5.2")
                          Package "angular2-datatable" has an incompatible peer dependency to "@angular/common" (requires "^2.0.0" (extended), would install "8.0.1").
                          Package "@angular/http" has an incompatible peer dependency to "@angular/core" (requires "7.2.15", would install "8.0.1")
                          Package "angular2-datatable" has an incompatible peer dependency to "@angular/core" (requires "^2.0.0" (extended), would install "8.0.1").
                          Package "angular2-datatable" has an incompatible peer dependency to "@angular/platform-browser" (requires "^2.0.0" (extended), would install "8.0.1").
                          Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.2").
                          Package "angular2-datatable" has an incompatible peer dependency to "rxjs" (requires "^5.0.0-beta.12", would install "6.5.2").
        Incompatible peer dependencies found. See above

尝试所有解决方案后仍然无法在 cli 中运行 ngserve。

非常欢迎任何帮助

Answer 1

解决方案

升级到 Angular 8 后

可能会出现问题

      ng update --all
    Using package manager: 'npm'
    Collecting installed dependencies...
    Found 58 dependencies.
                      Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.2")
                      Package "@angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=3.1 < 3.5", would install "3.5.2")
                      Package "angular2-datatable" has an incompatible peer dependency to "@angular/common" (requires "^2.0.0" (extended), would install "8.0.1").
                      Package "@angular/http" has an incompatible peer dependency to "@angular/core" (requires "7.2.15", would install "8.0.1")
                      Package "angular2-datatable" has an incompatible peer dependency to "@angular/core" (requires "^2.0.0" (extended), would install "8.0.1").
                      Package "angular2-datatable" has an incompatible peer dependency to "@angular/platform-browser" (requires "^2.0.0" (extended), would install "8.0.1").
                      Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.2").
                      Package "angular2-datatable" has an incompatible peer dependency to "rxjs" (requires "^5.0.0-beta.12", would install "6.5.2").
    Incompatible peer dependencies found. See above

这些错误的解决方案

ng update --all --force

然后报错

   ERROR in The Angular Compiler requires TypeScript >=3.4.0 and <3.5.0 but 3.5.2 was found instead.

npm install typescript@">=3.4.0 <3.5.0" --save-dev --save-exact

        Just to be sure run the following steps:

        npm uninstall -g @angular/cli
        npm cache verify
        npm install -g @angular/cli@latest
        Then in your Local project package:

        rm -rf node_modules dist 
        npm install --save-dev @angular/cli@latest
        npm i 
        ng update @angular/cli 
        ng update @angular/core

将解决该问题