写点什么

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:523950
用户头像
王文婧 InfoQ编辑

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

关注

评论

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

大语言模型→超能力者的边界探索与破局脑洞

代码制造者

#大语言模型

NocoBase 本周更新汇总:优化执行记录写入逻辑

NocoBase

开源 低代码 零代码 无代码 版本更新

BeeWorks Meet:私有化视频会议的高效选择

BeeWorks

即时通讯 IM 私有化部署 局域网视频软件

一文读懂:构建类Arb二层公链,收费模式全解析

区块链软件开发推广运营

交易所开发 dapp开发 链游开发 公链开发 代币开发

HarmonyOS NEXT 实现滑动拼图验证码功能

威哥爱编程

HarmonyOS HarmonyOS框架 HarmonyOS NEXT HarmonyOS5.0

实力认证!天翼云问鼎国产智算云服务市场

天翼云开发者社区

云服务

娱美德加速布局中国游戏市场:传奇IP新游发布、研发中心落地与专项基金启动三管齐下

新消费日报

【亲测有效】Tuxera NTFS 2024免费版|激活码|注册码分享 Tuxera for Mac最新破解教程

阿拉灯神丁

激活码生成器 NTFS磁盘管理器 Tuxera NTFS2024 Mac破解软件 磁盘管理工具

什么是微前端?有什么好处?有哪一些方案?

不在线第一只蜗牛

前端

实测文心4.5与X1一个月后,我预测文心大模型4.5 Turbo将有这几个升级点

herosunly

#大模型

精彩抢先看!博睿数据将亮相GOPS全球运维大会2025深圳站

博睿数据

GOPS全球运维大会 Bonree ONE LLM模型 DeepSeek

开发一款区块链软件的周期解析

区块链软件开发推广运营

交易所开发 dapp开发 链游开发 公链开发 代币开发

如何使用通义灵码辅助学习C++编程 - AI编程助手提升效率

阿里云云效

c++ 人工智能

长三角地区安防全产业链的盛会“2025浙江安博会”7月召开

AIOTE智博会

安防展会 杭州安博会 安博会、 安防博览会

(下篇)从项目管理到价值管理的转型路径:基于敏捷价值管理办公室(VMO®)的战略升级

ShineScrum

PMO 敏捷、 #项目管理 VMO

“领导企业转型必修课” 7月12-13日敏捷领导者(CAL1)认证周末班

ShineScrum

敏捷、 CAL

BeeWorks:打造安全可控的企业内网即时通讯平台

BeeWorks

即时通讯 IM 私有化部署 企业级应用

AI与5G的融合:如何实现更快速、更智能的物联网应用?

天津汇柏科技有限公司

AI 5G

e签宝携华为鸿蒙打造全国首个"智能签署江南范式"。

科技热闻

深入研究:京东商品详情API详解

tbapi

京东API 京东商品数据采集 京东商品详情API 京东数据采集

什么是日志关联?

运维有小邓

日志管理 日志审计 IT运维管理 日志关联

MPP 架构解析:原理、核心优势与对比指南

镜舟科技

大数据处理 分布式计算 存算分离 StarRocks MPP 架构

麦杰科技即将亮相2025第七届工业医院发展论坛:工业数据底座赋能工业设备全生命周期管理

麦杰研究院

20年携手共进,e签宝如何从重要参与者成长为行业标准制定者?

科技汇

怎么用DeepSeek生成系统架构图?DS高阶使用技巧分享!

职场工具箱

架构图 AIGC AI 绘图 架构图工具 DeepSeek

中关村论坛聚焦“AI+新材料”:枫清科技与中化信息、吉林大学共建联合实验室推动产业升级

Fabarta

人工智能 AI+ 大模型 新材料

Solana链开发全景指南:从环境搭建到生态实践

区块链软件开发推广运营

交易所开发 dapp开发 链游开发 公链开发 代币开发

企业管理中,一个好用的管理工具为何如此重要?

伤感汤姆布利柏

e签宝携华为鸿蒙打造全国首个"智能签署江南范式"。

科技汇

数字先锋 | 云上育才,课堂刮起科技风!

天翼云开发者社区

云电脑

Databend Cloud 如何给游戏行业数据分析带来 10 倍收益提升?

Databend

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