Angular11 升级记录

Angular11 升级记录

升级前：
angular 6.1
ng-zorro-antd 1.6.0
ng-alain 2.0.0-beta.2

升级后：
angular 11.2
ng-zorro-antd 11.4.2
ng-alain 11.4

升级步骤

参照 ng-zorro 的版本，升级路径：–> 7.5 --> 8.5 --> 9 --> 10 --> 11 。

分为 5 个阶段，每个阶段 同步 升级 Angular、ng-zorro、ng-alain 到指定的兼容版本，尝试修复新版本引起的代码变更后进入下一阶段：

1. Angular 6.1 --> 7.2
   ng-zorro 1.6 --> 7.5
   ng-alain 2.0.0
2. Angular 7.2 —> 8.2
   ng-zorro 7.5 --> 8.5
   ng-alain 2.0.0 —> ^8.0
3. Angular 8.2 —> 9
   ng-zorro 8.5 --> 9
   ng-alain 8.0 —> 9
4. Angular 9 —> 10
   ng-zorro 9 --> 10
   ng-alain 9 —> 10
5. Angular 10 —> 11
   ng-zorro 10 --> 11
   ng-alain 10 —> 11

升级 Angular 细节

首先，将全局 angular 和 node 升级到指定版本。这里升级到了最新版本。当然，如果版本跨度较大，可能会有莫名其妙的坑出现。

接着进行本地 Angular 升级

升级方式：按照 官方指南 的步骤，逐步从当前版本升级到指定版本

如果严格按照指南操作，那么升级过程中， angular 相应的依赖也进行了自动升级。如果没有自动升级，需要手动升级相关依赖再升级 angular。

对于项目的第三方依赖项，参考指南中的建议：

依赖升级后新版本的变化值得关注。比如 angular8 使用 TypeScript 3.4，tsconfig.json 会发生相应变化。同样 tslint.json 也会发生相应变化。

如果本地代码有更改未提交或者 peer 依赖版本兼容问题，执行 npm 命令或 ng update 命令时会报 warning，此时可加上 --allow-dirty 或 --force 解决

升级 ng-zorro 细节

v7升级指南
v8升级指南

若 v7 / v8 使用 ng update xxx 不支持可采用手动升级方式：手动升级 npm 包 npm install ng-zorro-antd@^7

---

v9升级指南
v10升级指南
v11升级指南

在 v9 v10 v11 升级过程中，官方提供的脚手架指令 tslint，可以自动修复部分代码变更问题。

---

ng-zorro 升级后代码的变化：

导入模块发生变化：

// 前：
import { ngZorroModule } from 'ng-zorro-antd';
// 后

import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzCardModule } from 'ng-zorro-antd/card';
import { NzCarouselModule } from 'ng-zorro-antd/carousel';
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';

nz-form-explain 发生变化：

// 前：
<form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="submitForm()">
  <nz-form-item>
    <nz-form-control>
      <nz-input-group [nzPrefix]="prefixUser">
        <input formControlName="userName" nz-input placeholder="Username" />
      </nz-input-group>
      <nz-form-explain *ngIf="validateForm.get('userName')?.dirty && validateForm.get('userName')?.errors">
      Please input your username!</nz-form-explain
      >
    </nz-form-control>
  </nz-form-item>
</form>

// 后
<form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="submitForm()">
  <nz-form-item>
    <nz-form-control nzErrorTip="Please input your username!">
      <nz-input-group nzPrefixIcon="user">
        <input formControlName="userName" nz-input placeholder="Username" />
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
</form>

popconfirm 发生变化：

// 前：
<nz-popconfirm [nzTitle]="'您确定要作废吗?'" (nzOnConfirm)="Ok(item)">
  <a nz-popconfirm>作废</a>
</nz-popconfirm>

// 后
<a nz-popconfirm 
[nzPopconfirmTitle]="'您确定要作废吗?'" (nzOnConfirm)="Ok(item)">作废</a>

dropdown 发生变化：

// 前：
<nz-dropdown>
  <a nz-dropdown>打印<i class="anticon anticon-down"></i></a>
  <ul nz-menu>
    <li nz-menu-item (click)="editReport(item)">
        报告1
    </li>
    <li nz-menu-item (click)="editReport(item)">
        报告2
    </li>
  </ul>
</nz-dropdown>

// 后
<a nz-dropdown [nzDropdownMenu]="menuPrint">打印<i nz-icon nzType="down"></i>
</a>
<nz-dropdown-menu #menuPrint="nzDropdownMenu">
  <ul nz-menu>
    <li nz-menu-item (click)="editReport(item)">
                  报告1
    </li>
    <li nz-menu-item (click)="editReport(item)">
                  报告2
    </li>
  </ul>
</nz-dropdown-menu>

ng-zorro 1.6 之后 icon 发生了变更：

// 前：
<i class="anticon anticon-down"></i>

// 后
<i nz-icon nzType="down"></i>

nz-table data 的新增、删除方式：

升级 ng-alain 细节

v8升级指南
v9升级指南
v10升级指南
v11升级指南

新版本的 ng-alain 提供了 dev 环境下的主题调试，如果需要变更主题颜色需要运行 npm run color-less

其他细节

🆙关于升级过程中 npm 报错等问题可参阅博客内 npm、Angular、ng-zorro-antd、ng-alain 分类下的文章

Reference

1. http://101.200.60.78/archives/angular%E5%8D%87%E7%BA%A76-10
2. https://beginor.github.io/2020/02/20/upgrade-to-angular-9-manually.html
3. https://blog.csdn.net/DBSDS/article/details/112195950
4. https://blog.csdn.net/m0_37729058/article/details/93599391?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control
5. https://zhuanlan.zhihu.com/p/345242316
6. https://blog.csdn.net/weixin_39567943/article/details/111977897?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242