写点什么

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

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

关注

评论

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

再聊对架构决策记录的一些思考

京东科技开发者

MySQL 8.0.26版本升级32版本查询数据为空的跟踪

GreatSQL

iNet Network Scanner for Mac(mac网络扫描工具) v3.0.6永久激活版

iMac小白

告别过往,重获新生

少油少糖八分饱

村上春树 小说推荐 海边的卡夫卡

目前人工智能的发展,未来对人类的就业有那些影响?

算法的秘密

电动车窗开关中MOS管的应用解析

芯动大师

汽车电子 芯片技术 MOS管

移动App开发常见的三种模式(原生应用、H5移动应用、混合模式应用)

天津汇柏科技有限公司

软件开发 APP开发 软件定制开发

开源无代码 / 低代码平台 NocoBase 0.20:支持多数据源

NocoBase

开源 低代码 低代码开发 低代码平台 无代码平台

借助 Terraform 功能协调部署 CI/CD 流水线-Part 2

SEAL安全

运维 云原生 CI/CD Terraform

震惊:苹果手机电池栏“黑白无常”

京东科技开发者

1688接口推荐:1688商品详情数据接口

tbapi

1688 1688API接口 1688商品详情数据接口 1688商品数据采集

科技越发展普通人会越限制还是越free?

算法的秘密

Amazon SageMaker 机器学习之旅的助推器

亚马逊云科技 (Amazon Web Services)

南开大学OpenHarmony技术俱乐部揭牌成立

科技热闻

PostgreSQL数据库连接数设置的越大越好吗

张文平

数据库 postgresql 连接数 数据库配置

淘系接口推荐:淘宝店铺所有商品数据接口

tbapi

淘宝API接口 淘宝店铺所有商品数据接口 淘宝商品数据采集

利用1688商品详情API:打造高效的电商解决方案

技术冰糖葫芦

API Explorer API 接口 API 策略 pinduoduo API

CCE集群VPC网络模式下几种访问场景

华为云开发者联盟

后端 开发 华为云 华为云开发者联盟

RightFont for Mac(字体管理软件) v8.6.0免激活版

iMac小白

从零开始配置Jenkins与GitLab集成:一步步实现持续集成

百度搜索:蓝易云

云计算 Linux gitlab 运维 jenkins

华为云亮相LEAP科技展,携手沙特共创智能新高度

华为云开发者联盟

云计算 后端 华为云 华为云开发者联盟

跨境电商三大趋势

api开发

GaussDB(DWS)集群通信:详解pooler连接池

华为云开发者联盟

数据库 后端 华为云 华为云开发者联盟 华为云GaussDB(DWS)

HarmonyOS-安装篇(DevEco Studio)

京东科技开发者

DropDMG for Mac (dmg制作工具) v3.6.7中文版

iMac小白

基于 Sass 的架构之 redis多租户

智慧源点

实时工业控制系统的创新整合:PLC4X与CnosDB的高效数据采集与存储

CnosDB

开源 时序数据库 tsdb CnosDB

为了跳槽或提升自己,你会先学习哪一门编程语言?

小齐写代码

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