如何通过 ng update 将 Angular 7 更新为 Angular 8

How to update Angular 7 to Angular 8 by ng update

我尝试在终端中通过 运行 ng update @angular/cli @angular/core 将 Angular 项目从核心框架和 CLI 的版本 7.2.5 更新到 8。

来自终端的响应是 'We analyzed your package.json and everything seems to be in order. Good work!'

我的版本列表:

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.3.9
Node: 11.14.0
OS: darwin x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, forms
... http, 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-ng-packagr   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         7.3.9
@angular/cdk                       7.3.7
@angular/cli                       7.3.9
@angular/material                  7.3.7
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.3.9
@schematics/angular                7.3.9 (cli-only)
@schematics/update                 0.13.9
ng-packagr                         5.2.0
rxjs                               6.5.2
typescript                         3.2.4
webpack                            4.29.0

截至今天,Angular 8 不是稳定版本。

但如果你真的想更新非稳定版本,请在包名称末尾使用 @next

ng 更新@angular/cli@next @angular/core@next

到今天已经稳定了8.0.0 :)

您可能想尝试 运行 ng update --all 更新 package.json 文件中的所有包。 但是,如果它发现某些 inter-dependencies 与其他软件包不匹配,则可能不会继续。 在这种情况下,您可能还想添加 --force 选项。

或者,您可以选择更量身定制的方法和 hand-pick 软件包进行更新(如 Veeraragavan 在回答中所建议的那样),但您不再需要添加 @next 版本,因为所有 Angular 包 8.0.0 版本目前是稳定的。

除了有关 ng update 命令的其他答案外,请注意 Angular 版本 7 和 8 之间存在重大更改,需要引起注意。

特别是:

  • If you use the legacy HttpModule and the Http service, switch to HttpClientModule and the HttpClient service. HttpClient simplifies the default ergonomics (you don't need to map to JSON anymore) and now supports typed return values and interceptors. Read more on angular.io.
  • Make sure you are using Node 10 or later.

Angular 在他们的 Angular Update Guide.

中详细描述了这个过程

如果你重复

ng update @angular/cli @angular/core

它将升级到下一步,即 8

通过 运行

将核心框架和 CLI 更新到版本 8

ng update @angular/cli@8 @angular/core@8 在您的终端

Angular 团队使升级比以前容易得多。通过使用 Angular 更新指南,您可以获得 运行 将项目从 Angular 版本更新到另一个版本所需的命令。

前往该交互式指南并将 7.1.4 指定为当前版本,将目标版本指定为 v8.3.2,然后单击 告诉我如何更新按钮

指定版本后,您会收到一条警告,提示我们不建议跨多个主要版本。由于我们正在从 v7 迁移到 v8:

Angular 8 使用 TypeScript 3.4,read more about errors that might arise from improved type checking.

确保您使用的是 Node 10 or later

在你的命令行界面运行下面的命令:

$ ng update

这将分析您项目的 package.json 文件,并为您提供要使用所需命令更新的包列表:

    We analyzed your package.json, there are some packages to update:

      Name                               Version                  Command to update
     --------------------------------------------------------------------------------
      @angular/cli                       7.1.4 -> 8.3.19          ng update @angular/cli
      @angular/core                      7.1.4 -> 8.2.14          ng update @angular/core
      rxjs                               6.3.3 -> 6.5.3           ng update rxjs


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

所以,让我们首先使用以下命令将核心框架和 CLI 分别更新为 v8.2.14v8.3.19 :

$ ng update @angular/cli @angular/core

这会将核心框架和 CLI 更新为 Angular 8:

    Updating package.json with dependency @angular/compiler @ "8.2.14" (was "7.1.4")...
    Updating package.json with dependency @angular/language-service @ "8.2.14" (was "7.1.4")...
    Updating package.json with dependency @angular/forms @ "8.2.14" (was "7.1.4")...
    Updating package.json with dependency @angular/platform-browser @ "8.2.14" (was "7.1.4")...
    Updating package.json with dependency @angular/platform-browser-dynamic @ "8.2.14" (was "7.1.4")...
    Updating package.json with dependency @angular/cli @ "8.3.19" (was "7.1.4")...
    Updating package.json with dependency @angular/animations @ "8.2.14" (was "7.1.4")...
    Updating package.json with dependency @angular/common @ "8.2.14" (was "7.1.4")...
    Updating package.json with dependency zone.js @ "0.9.1" (was "0.8.26")...
    Updating package.json with dependency rxjs @ "6.5.3" (was "6.3.3")...
    Updating package.json with dependency @angular/router @ "8.2.14" (was "7.1.4")...
    Updating package.json with dependency @angular/core @ "8.2.14" (was "7.1.4")...
    Updating package.json with dependency @angular/compiler-cli @ "8.2.14" (was "7.1.4")...
    Updating package.json with dependency typescript @ "3.5.3" (was "3.1.6")...

Note: On Windows I had to run npm install after ng update @angular/cli @angular/core to install the new versions of the dependencies.

现在,让我们使用以下命令检查 Angular 的新版本:

$ ng --version

这是命令的输出:

Angular CLI: 8.3.19
Node: 10.16.3
OS: win32 ia32
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.4
@angular-devkit/build-angular     0.11.4
@angular-devkit/build-optimizer   0.11.4
@angular-devkit/build-webpack     0.11.4
@angular-devkit/core              7.1.4
@angular-devkit/schematics        8.3.19
@angular/cli                      8.3.19
@ngtools/webpack                  7.1.4
@schematics/angular               8.3.19
@schematics/update                0.803.19
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.23.1

您可以看到我们已经成功将Angular CLI更新为v8.3.19,Angular更新为v8.2.14 和不同的核心包。甚至 TypeScript 也升级到 v3.5.3.

我从这个 update guide and this official post

得到了这些说明