跨越多个主要版本的Angular项目的升级方法

2 年 ago

韵, 科

3 minutes

准备作业

官方支持跨多个主要版本的升级，如以下URL所述。

Angular更新指南

我们立即根据更新指南开始进行版本升级吧。

这次我们将进行从版本7升级到版本12的更新。

开始升级版本

将升级至Angular8

我們將按照更新指南的指示，進行命令執行和項目檢查。

查看更新指南的内容后，如果主要版本之间有很大差异的话，似乎需要逐个升级版本。
按照更新指南中所述，首先输入以下命令将项目版本更新至8。

$ ng update @angular/cli@8 @angular/core@8

但是出现了以下错误，无法执行该命令。

Using package manager: 'npm'
Collecting installed dependencies...
Found 0 dependencies.
Package '@angular/cli' is not a dependency.

没有找到任何安装包。
当前（截至2021/05/18）的AngularCLI最新版本12似乎不包含关于版本8的包。
因此，请运行以下命令，将计算机上已安装的AngularCLI版本降至8。

$ npm install -g @angular/cli@8.0.0

尝试再次执行之前的命令后，出现了不同的错误。

Using package manager: 'npm'
Collecting installed dependencies...
Found 35 dependencies.
Fetching dependency metadata from registry...
                  Package "codelyzer" has an incompatible peer dependency to "@angular/core" (requires ">=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0" (extended), would install "8.2.14").
                  Package "codelyzer" has an incompatible peer dependency to "@angular/common" (requires ">=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0" (extended), would install "8.2.14").
                  Package "codelyzer" has an incompatible peer dependency to "@angular/compiler" (requires ">=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0" (extended), would install "8.2.14").
                  Package "codelyzer" has an incompatible peer dependency to "@angular/platform-browser-dynamic" (requires ">=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0" (extended), would install "8.2.14").
                  Package "codelyzer" has an incompatible peer dependency to "@angular/platform-browser" (requires ">=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0" (extended), would install "8.2.14").
Incompatible peer dependencies found. See above.

在进行调查后，似乎是由于对等依赖关系的版本不匹配而导致的错误。
当出现对等依赖版本不匹配导致的错误时，还可能会输出以下类似的日志。

× Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.

在那时，您将执行一个添加了忽略对等依赖关系版本不匹配的选项 “–force” 的命令。

$ ng update @angular/cli@8 @angular/core@8 --force

由于能够顺利执行，我们可以进行下一步操作了。
根据命令输出日志显示出现了漏洞，因此执行“npm audit fix”命令来修复它。

added 5 packages from 8 contributors, removed 1 package, updated 1 package and audited 1396 packages in 10.624s

61 packages are looking for funding
  run `npm fund` for details

found 31 vulnerabilities (17 low, 5 moderate, 9 high)
  run `npm audit fix` to fix them, or `npm audit` for details

結束後，務必進行提交。如果未進行提交，可能會在下一個版本升級步驟中出現錯誤。

继续更新

执行以下命令，确认Node.js的版本是否为10.13或更高。

$ node --version

在确认了Node.js的版本之后，将项目的版本更改为9。
如果根据更新指南中的检查项目对项目进行了更改自上次版本升级以来，请在执行命令之前再次提交更改。

$ ng update @angular/core@9 @angular/cli@9

如果进行了提交，应该可以在不发生错误的情况下执行。如果没有进行提交，则会发生以下错误。

Repository is not clean. Please commit or stash any changes before updating.

如果因为某些原因不想提交而是继续进行更新，则可以通过添加以下命令选项来执行命令。

$ ng update @angular/core@9 @angular/cli@9 --allow-dirty

增加包装

由于Angular 9添加了新功能，因此需要添加新的包来使用它。

$ ng add @angular/localize

然后

按照更新指南的指示，通过重复检查项目并进行版本更新，您可以将Angular项目升级到所需的版本。

最终

完成工作后，请不要忘记执行以下命令，并将Angular CLI的版本恢复到稳定版，以备将来开始工作时使用。

$ npm install -g @angular/cli

总结

本文介绍了我们进行了跨多个主要版本的Angular项目的版本升级。通过逐个检查更新指南的检查项，我们可以通过升级单个主要版本来进行跨多个主要版本的Angular项目的版本升级。

有点长的额外好处

在Angular 11版本及以后的项目中，由于TSLint和Codelyzer的不推荐使用，我将说明如何迁移到ESLint。

添加@angular-eslint/schematics

执行以下命令，在项目中添加@angular-eslint/schematics。

$ ng add @angular-eslint/schematics

输出了如下的日志，并且成功安装了软件包。

ℹ Using package manager: npm
✔ Found compatible package version: @angular-eslint/schematics@12.0.0.
✔ Package information loaded.

The package @angular-eslint/schematics@12.0.0 will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.

    All @angular-eslint dependencies have been successfully installed ?

    Please see https://github.com/angular-eslint/angular-eslint for how to add ESLint configuration to your project.

UPDATE package.json (1837 bytes)
✔ Packages installed successfully.

选择迁移的目标

选择要执行迁移的项目。
这取决于angular.json中定义的项目数量，如果定义了多个项目，则需要选择迁移目标。
本次将迁移名为”bookmanagement-angular”的项目，因此执行以下命令。

$ ng g @angular-eslint/schematics:convert-tslint-to-eslint bookmanagement-angular

顺利完成了迁移，生成了.eslintrc.json文件。

? Would you like to remove TSLint and its related config if there are no TSLint projects remaining after this conversion? Yes
? Would you like to ignore the existing TSLint config? Recommended if the TSLint config has not been altered much as it makes the new 
ESLint config cleaner. Yes

    INFO: We are now installing the "tslint-to-eslint-config" package into a tmp directory to aid with the conversion

    This may take a minute or two...

CREATE .eslintrc.json (1015 bytes)
UPDATE angular.json (3856 bytes)

删除TSLint

最后，执行以下命令，删除不再需要的TSLint。

$ rm tslint.json 
$ npm uninstall tslint

总结

以上是迁移工作的结束。
本次我们将从Angular 7升级到Angular 12的项目，将Codelyzer和TSLint迁移到ESLint。
希望本文能对某人有所帮助。