由于Angular 9已正式发布,我决定进行更新试试看

终于,Angular9正式发布了!去年10月/11月原定的发布日期一直延期到了rc.14版本,最终推出了。

Angular9注目度很高,原因是Ivy成为默认的渲染引擎。

我在工作中尝试将项目更新至Angular9,并记录下来。

修改点

在更新到Angular 9版本时有很多内容描述。

不建议

已删除的废弃API

会自动迁移的事物

升级操作步骤

由于《Angular 更新指南》中已经提供了更新方法,因此我们将按照步骤进行更新。

更新至版本8的最新版本。

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

升级到Typescript3.7

由于Angular 9需要使用Typescript 3.7或更高版本,需要升级Typescript。

npm install typescript@latest

在撰写本文时,3.7.5版是最新版本。

升级至Angular9

ng update @angular/core @angular/cli

→Automated Migrations for Version 9的内容将自动更改。

如果同时构建了多个项目库,则需要使用ngcc命令。

在由多个项目组成的Angular项目中,如果使用npm-run-all或concurrently进行并行构建,则可能会出现类似”ERROR in ngcc is already running at process”的错误,导致只能构建一个项目。

为了避免这种情况发生,在构建之前,需要使用ngcc进行编译。
参考:https://angular.io/guide/ivy#speeding-up-ngcc-compilation

"scripts": {
  ・・・
  "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"

关于PrimeNG的一点额外话

PrimeNG的UI框架已经推出了适用于Angular9的版本。
(写作时版本为9.0.0-rc.4)

PrimeNG的V8不支持Ivy,如果只将Angular升级到v9,会出现错误。
因此,如果要升级到Angular9,还需要同时升级PrimeNG。

然而,由于这个人有些不起眼的习性,我会记下来。

primeng/common目录已被删除。

在v9之前,除了组件(如Service和MenuItem等)之外的类都在common目录下,但是从v9开始它们被移动到primeng/api目录下。
由此,需要修改导入路径,几乎需要对整个页面进行修正。。

Steps的行为变得奇怪了。

这可能是因为我的环境不好,导致在每个步骤项上都没有应用ui-steps-item这个类。这会导致CSS无法应用,从而使屏幕变得混乱。

首先,通过在传递给Steps组件的MenuItem的styleClass属性中指定{‘ui-steps-item’:true}来解决了该问题。

最后

我顺利地将代码升级到Angular9,而且这次最重要的改进无疑是Ivy!

关于效果的问题,使用ng build –prod生成的main.js文件的大小从450KB减小到了大约370KB。(这是经过服务器gzip压缩后返回的大小)

Ivy的表现真厉害!在初始表示时,整体大小从2.6MB减少到了2.0MB,成功削减了600KB!

顺便提一下,在这个过程中,“@angular/pwa”和“@angular/cdk”并没有自动更新,所以可能需要单独进行更新。

广告
将在 10 秒后关闭
bannerAds