AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

Angular 9 即将发布:改进 Ivy 编译和渲染管道

  • 2019-11-12
  • 本文字数:4469 字

    阅读完需:约 15 分钟

Angular 9即将发布:改进Ivy编译和渲染管道

你知道吗?Angular 9 就要来啦!Angular 是基于 TypeScript 的 Web 应用程序框架,Angular 9 的一系列更新将为开发者们带来不小的影响。本文将主要从最新功能、重大更改、Angular 组件等方面对 Angular 9 的相关动态进行详解。


Angular 9 RC 版已经发布了,这对 Angular 开发人员来说真是激动人心的时刻——我针对的不是 Angular 9 RC 的发布,我说的是 Ivy,Ivy 现在是 Angular 中的默认渲染引擎。



相信我,如果你还没觉得有多兴奋,请看看 Mathias Raacke 的推文:一个 Hello World 应用才有 7KB 大小!



下面我们就来研究一下,看看除了 Ivy 还有哪些东西。

新功能

添加对未装饰类的迁移支持

对指令和组件来说,直到 Angular 8 时装饰器对基类都是可选的。这适用于未使用 @Injectable 装饰器的服务。


export class BasePlain {  constructor(private vcr: ViewContainerRef) {}}
@Directive({selector: '[blah]'})export class DerivedDir extends BasePlain {}
复制代码


引擎变成 Ivy 后这种类也需要装饰器。为了处理这种情况,使用 ng update 迁移时装饰器将作为迁移的一部分添加进来。请阅读此处内容以获取详情,有少数情况是不会被照顾到的。

FormControlName 接受 Number 作为输入

下面的代码你可能已经用过很多次了,但是我们从来没有考虑过[formControlName]=“i”的工作机制;因为它接受字符串类型的值,所以没有 fullTemplateTypeCheck 也可以。但是在 Ivy 中这样做会失败。为了确保下面的语法仍然有效,formControlName 可以接受 string | number 类型的值。


<div formArrayName="tags">  <div *ngFor="let tag of tagsArray.controls; index as i">    <input [formControlName]="i">  </div></div>
复制代码

用 TestBed.inject 替换 TestBed.get

在 Angular 8 中有一项重大更改,TestBed.get 不再接受字符串值;现在团队决定回滚更改,因为它影响到了更大的应用程序基础部分。现在我们有了类型安全的版本 TestBed.inject,TestBed.get 已弃用。


TestBed.get(ChangeDetectorRef) // returns any
TestBed.inject(ChangeDetectorRef) // returns ChangeDetectorRef
复制代码

ViewChild 中 Static 标志的默认值

Angular 8 中引入的另一项重大更改,是 ViewChild 需要 static 标志。静态属性仍然存在,但使用假值时我们不再需要传递这个属性。使用 ng update 更新到 Angular 9 后,迁移会移除所有位置使用的{ static: false }。


@ViewChild(ChildDirective) child: ChildDirective;@ViewChild(ChildDirective, { static: false }) child: ChildDirective; // similar to above code
复制代码

ng-add 支持 @angular/localize

要使用 @angular/localize,我们现在可以运行 ng add @angular/localize,这条命令会安装软件包并将必要的导入添加到 polyfills 中,这也是它工作时需要的。

针对 Template 的 FullTemplateTypeCheck

在使用 Angular 时常常会遇到一个问题:“为什么不严格检查模板的类型”。这是之前的情况,但是现在对于*ngIf、*ngFor 这样的指令,甚至是管道都会是严格的。有 3 种模式可用于检查模板的类型:


  • 基本模式:设置 fullTemplateTypeCheck: false 来启用;

  • 完全模式:设置 fullTemplateTypeCheck: true 来启用;

  • 严格模式:设置 fullTemplateTypeCheck: true 和 strictTemplates: true 来启用。


更多详情请参阅这篇文档

TypeScript 3.6 支持

新版 Angular 现在需要 Typescript 3.6 版本。下面是 Lars Gyrup Brink Nielsen 总结的 Angular 版本和对应的 TypeScript 版本支持。



Angular CLI、Anuglar、Node.js 和 TypeScript兼容性列表

对 ModuleWithProviders 的泛型支持

如果你是 Angular 库的所有者,那么你很可能已经用过 Angular 9 中的 ModuleWithProviders 了。现在必须使用泛型 ModuleWithProviders 类型来指示 Angular 模块类型。


新版已经添加了迁移原理图(Schematic),因此 ng update 将负责这部分的迁移。


之前的代码:


@NgModule({ ...}) export class MyModule { static forRoot(config: SomeConfig): ModuleWithProviders {   return {         ngModule: SomeModule,         providers: [{ provide: SomeConfig, useValue: config }]   }; }}
复制代码


迁移后:


@NgModule({ ...})export class MyModule {  static forRoot(config: SomeConfig): ModuleWithProviders<SomeModule>{   return {         ngModule: SomeModule,         providers: [{ provide: SomeConfig, useValue: config }]   }; }}
复制代码

将原理图应用于库

ng update 负责所有代码的迁移,但不适用于 Angular 库。在 Angular 9 中,ng update 会将所有迁移原理图也应用于库项目。这对 Angular 库的作者来说是很重要的,可以让你的代码与最新更改保持同步。

不再需要 entryComponents

如果你使用过 Angular 中的 popup,则必须使用这个属性。有了它,你才能在动态加载组件后无需在模板中引用它。现在改用 Ivy 后就用不着它了。

重大更改

移除 tslib 依赖项

Angular 现在不再依赖 tslib。在早期版本的 Angular 中它是必需的,并且是依赖项的一部分。如果你不用 Angular CLI,则可能需要安装这个包。

Forms

  • ngForm:以前</ ngForm>是有效的选择器,现在需要改用</ ng-form>。

  • NgFormSelectorWarning:在 Angular 6 中已弃用,现在已移除。此指令的目的是在使用已弃用的ngForm选择器时显示警告。

  • FormsModule.withConfig:FormsModule.withConfig 已被移除。我们需要直接使用 FormsModule,之前 withConfig 用于接受以下选项:


opts: { warnOnDeprecatedNgFormSelector?: "never" | "once" | "always"; }
复制代码


  • 弃用类型 RenderComponentType 已被移除。请改用 RendererType2。

  • 弃用类型 RootRenderer 已被移除。请改用 RendererFactory2。

Angular Translation

  • Translations(通过 loadTranslations()函数加载)现在必须使用 MessageId 作为 Translation 键,替代之前的 SourceMessage 字符串。

  • 要将 $localize 函数附加到全局范围,请从 @angular/localize/init 导入。以前这里是 @angular/localize。

  • 要访问 loadTranslations()和 clearTranslations()函数,请从 @angular/localize 导入。以前这里是 @angular/localize/run_time。

Service Worker

在 ngsw-config.json 中移除了 versionedFiles 属性


之前:


"assetGroups": [  {    "name": "test",    "resources": {      "versionedFiles": [        "/**/*.txt"      ]    }  }]
复制代码


之后:


"assetGroups": [  {    "name": "test",    "resources": {      "files": [        "/**/*.txt"      ]    }  }]
复制代码

Angular Bazel

  • @angular/bazel ng_setup_workspace()已经用不着了,并且已被移除。Angular 会假设你将在 WORKSPACE 文件中获取 rules_nodejs,并且这里没有其他依赖项。只需移除对此函数的任何调用和对应的 load 语句。

  • 如果你从 @angular/bazel 使用 protractor_web_test_suite,现在要切换到 @bazel/protractor 包上。

弃用

  • TestBed.get 函数已弃用,建议使用类型安全的 TestBed.inject。


完整指南请参阅官方文档。本文没有涉及 Ivy 的介绍内容,因为这是一个非常大的主题,我们将很快写一篇博文来介绍 Ivy 的所有功能。

Angular CLI

支持验证 CLI 版本

新增检查可以验证所安装的 CLI 是否为最新发布的版本。如果不是最新版,那么在运行 ng update 时将安装最新版本,作为临时包来运行迁移。

支持混合多种配置

之前我们使用 ng build 时可以使用–configuration 来传递配置,一个问题是,如果我想覆盖某些配置,我们必须复制整个配置并创建一个新条目才能使用它。


现在可以使用 ng build --configuration=prod,testing 这样的写法,这样在 testing 配置中我们就可以只传递需要覆盖的配置。

指定 ng-add 的选项

另一项更新针对 Angular 库的作者,你可以使用 ng add 来指定是否应将包添加到依赖项。


你可以在 package.json 中指定以下选项:


ng-add : {      "save": false | true | 'dependencies' | 'devDependencies'}
复制代码

组件原理图的类型选项

目前来说,当我们使用 ng gc user 时,它将使用组件类 UserComponent 生成一个文件,其类型选项可让你定义要创建的组件类型;例如 ng gc user --type=“dialog”将创建一个组件,其类名称为 UserDialog。

生成拦截器的原理图支持

目前来说添加拦截器都是手动的。在 Angular 9 中,我们将能够使用 ng g i custom 创建 CustomInterceptor 类。

app-shell 原理图更改

为了生成 app-shell,我们必须传递–clientProject;它现在是可选的。如果没有提供,它将考虑默认项目。

生成原理图时跳过测试

如果我们使用–minimal=true 创建应用程序,它将跳过端到端和单元测试配置。但当我们使用 ng g 生成 component/pipe/service 时,它会添加一个 spec.ts 文件。从 Angular CLI 9 开始这个问题已经解决了。

自动发现 multiSelect schema prompt

现在要创建一个可以有 multiSelect 的 prompt,我们必须提供其他许多选项。在 Angular 9 中,可以像下面的配置一样简化这里的步骤。


test: {  type: 'array',  'x-prompt': {    'type': 'list',    'multiselect': false,    'items': [      {        'value': 'one',        'label': 'one'      },      {        'value': 'two',        'label': 'two'      },    ],    'message': 'test-message',  },}
复制代码

支持提供 npmrc 文件路径

npm 中提供了 NPM_CONFIG_USERCONFIG 和 NPM_CONFIG_GLOBALCONFIG 变量。当提供这些变量时,Angular CLI 会首选它们而非全局.npmrc 文件。请参阅npm文档以获取更多细节。

重大更改

  • 使用 CLI 时会移除 styleext 和 spec 选项,而应使用 style 和 skipTests 选项替代。

Angular 组件

新的 Clipboard 模块

有一个新的剪贴板组件可用,它是 @angular/cdk 系列的一部分。


想要了解更多实现细节,请阅读 Tim Deschryver 的博客文章

hammerjs 现在是可选的

在早期版本中需要 hammerjs 来添加手势支持。它现在是可选的,并且内部使用的所有实现都已移除,你可以使用@angular/platform-b​​rowser中的 HammerModule。

针对谷歌地图的新包

@angular/google-maps 包现已发布,所以集成谷歌地图不再是一项艰巨的任务了。这个包已经在多种设备上进行了测试。你可以参考 Tim Deschryver 的博客文章了解实现细节。

重大更改

  • 组件不再可以通过 @angular/material 导入。现在要使用单独的辅助入口点,例如 @angular/material/button。

  • MAT_CHECKBOX_CLICK_ACTION 已弃用,请使用 MAT_CHECKBOX_DEFAULT_OPTIONS 代替。

总结

终于看到 Ivy 更加稳定并且可以用于生产了,我感到非常兴奋,相信你也很会很激动。Angular CLI 新增了许多很棒的功能,提升了我们的工作效率。很高兴看到 Angular Material 中添加了一些很棒的组件,例如地图和剪贴板。相信我,现在有了 Ivy,我们可以对未来抱有更大的期待,因此 Angular 无疑会迎来激动人心的时刻,你也应该为此感到振奋。


作者介绍:


Santosh Yadav 拥有 10 多年的经验,他是 Angular 和 NgRx 的开源贡献者,并且是 AngularInDepth 和 DotNetTricks 的作者。


原文链接


https://blog.angularindepth.com/exciting-time-ahead-be-ready-for-angular-9-b3dbb4078c47


2019-11-12 13:523834
用户头像
王文婧 InfoQ编辑

发布了 126 篇内容, 共 75.1 次阅读, 收获喜欢 277 次。

关注

评论

发布
暂无评论
发现更多内容

架构训练营 - 模块 9 作业

焦龙

架构训练营

盘点 2021|人只有跌入谷底,每一步都是往上走的。

踏雪痕

生活 盘点2021 盘点 2021

网站安全检测:推荐8款免费的 Web 安全测试工具

喀拉峻

网络安全

连续读书1000天,我开始思考一篇好的读书总结是什么样子的

宇宙之一粟

读书总结 1月月更

消息积压&消息丢失解决方案

JavaEdge

1月月更

程序员的快乐,只需要这7款工具!

Jackpop

大画 Spark :: 网络(3)-回复消息机制OneWayMessage与RpcRequest对比

dclar

大数据 spark 源代码 Spark 源码

架构实战营模块五作业

曾竞超

架构实战营 「架构实战营」

【微博评论】功能的高性能高可用计算架构设计

红莲疾风

「架构实战营」

Java基础:UUID

程序员架构进阶

Java uuid 1月日更 2022

渗透测试思路总结

网络安全学海

黑客 信息安全 渗透测试 安全漏洞

kafka Controller作用

石头哥谈架构

大数据 kafka 消息中间件

LabVIEW条形码识别(实战篇—5)

不脱发的程序猿

图像识别 机器视觉 图像处理 LabVIEW 条形码识别

15 Promethus之核心组件介绍

穿过生命散发芬芳

Prometheus 1月月更

技术管理养成:一个普通的在线文档做瀑布与敏捷的融合

dclar

团队管理 项目管理 敏捷开发 团队协作 CTO

[架构实战营] 模块六作业

Geek_0ed632

「架构实战营」

毕业设计项目

panxiaochun

架构实战营

关于项目中 Repository 层的思考

CRMEB

LeetCode每日一题 No.1716 计算力扣银行的钱

DawnMagnet

算法 rust LeetCode 力扣

Go 语言快速入门指南: Go 并发互斥锁

宇宙之一粟

并发 Go 语言 互斥锁 1月月更

ABAP 调用第三方 API,遇到乱码该怎么办?

汪子熙

Unicode abap 字符编码 1月月更

毕业设计

dean

架构实战营

大数据集群节点磁盘负载不均衡怎么办?

明哥的IT随笔

大数据 hadoop CDH CDP

spring5.0.x 源码编译过程及踩坑记录

努力努力再努力

1月日更

架构实战-毕业设计项目

无名

架构实战营 「架构实战营」

“微博评论”高性能高可用计算架构设计

swallowluo

架构实战营 #架构实战营 「架构实战营」

第一节:创建SpringBoot项目并运行HelloWorld

入门小站

springboot

好家伙!你这网络基础可以啊!1️⃣

XiaoLin_Java

1月日更

有传闻说,写好总结可以升职加薪?

程序人生

架构营模块九作业

GTiger

架构实战营

「offer来了」1张思维导图,6大知识板块,带你梳理面试中CSS的知识点!

星期一研究室

css3 前端开发 面试题 面试‘ HTML5, CSS3

Angular 9即将发布:改进Ivy编译和渲染管道_大前端_Santosh Yadav_InfoQ精选文章