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

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

做者 | Santosh Yadav译者 | 王强编辑 | 张之栋、王文婧你知道吗？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 还有哪些新功能。

  新功能   添加对未装饰类的迁移支持对指令和组件来讲，直到 Angular 8，装饰器对基类都是可选的，这适用于未使用 @Injectable 装饰器的服务。

export class BasePlain {
  constructor(private vcr: ViewContainerRef) {}
}

@Directive({selector: '[blah]'})
export class DerivedDir extends BasePlain {}

引擎变成 Ivy 后，这种类也须要装饰器。为处理这种状况，使用 ng update 迁移时，装饰器将做为迁移的一部分添加进来。请阅读如下连接了解详情，有少数状况是不会被照顾到的:  https://hackmd.io/@alx/S1XKqMZeS

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.getAngular 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 来启用。

更多详情请参阅这篇文档: https://next.angular.io/guide/template-typecheck

TypeScript 3.6 支持

新版 Angular 如今须要 TypeScript 3.6 版本。下面是 Lars Gyrup Brink Nielsen 总结的 Angular 版本和对应的 TypeScript 版本支持。

请看Angular CLI、Anuglar、Node.js 和 TypeScript 兼容性列表: https://gist.github.com/LayZeeDK/c822cc812f75bb07b7c55d07ba2719b3

对 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 CLI，则可能须要安装这个包。

Forms

• ngForm：之前<ngForm></ ngForm>是有效的选择器，如今须要改用<ng-form></ 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() 和 clearTrans-lations() 函数，请从 @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。

完整指南请参阅官方文档: https://next.angular.io/guide/updating-to-version-9

本文没有涉及 Ivy 的介绍内容，由于这是一个很是大的主题，咱们将很快写一篇博文来介绍 Ivy 的全部功能。

Angular CLI 支持验证 CLI 版本

新增检查能够验证所安装的 CLI 是否为最新发布的版本。若是不是最新版，那么在运行 ng update 时将安装最新版本，做为临时包来运行迁移。

支持混合多种配置

以前咱们使用 ng build 时可使用 --configu-ration 来传递配置。但问题是，若是我想覆盖某些配置，必须复制整个配置并建立一个新条目才能使用它。

如今可使用 ng build --configuration=prod,te-sting 这样的写法，这样一来，在 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，咱们必须传递 --clientPro-ject。如今它是可选的，若是没有提供，它将考虑默认项目。

生成原理图时跳过测试

若是咱们使用 --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 文档: https://docs.npmjs.com/misc/config#npmrc-files

突破性变革

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

Angular 组件 新的 Clipboard 模块

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

想要了解更多实现细节，请阅读 Tim Deschryver 的博客文章: https://blog.angularindepth.com/use-the-new-angular-clipboard-cdk-to-interact-with-the-clipboard-be1c9c94cac2?source=post_page-----b3dbb4078c47----------------------

hammerjs 如今是可选的

在早期版本中须要 hammerjs 来添加手势支持。如今它是可选的，且内部使用的全部实现均已移除，你可使用 @angular/platform-browser中的 HammerModule。

针对谷歌地图的新包

@angular/google-maps 包现已发布，因此集成谷歌地图再也不是一项艰巨的任务了。这个包已经在多种设备上进行了测试，你能够参考 Tim Deschryver 的博客文章了解实现细节: https://blog.angularindepth.com/google-maps-is-now-an-angular-component-821ec61d2a0?source=post_page-----b3dbb4078c47----------------------

重大变化

• 组件再也不经过 @angular/material 导入。如今要使用单独的辅助入口点，例如 @angular/material/button。

• MAT_CHECKBOX_CLICK_ACTION 已被弃用，请使用 MAT_CHECKBOX_DEF-AULT_OPTIONS 代替。

     总 结   

  
  

终于看到 Ivy 更加稳定而且能够用于生产了，我感到很是兴奋，相信你也会很激动。Angular CLI 新增了许多很棒的功能，提高了咱们的工做效率。很高兴看到 Angular Material 中添加了一些很棒的组件，例如地图和剪贴板。相信我，如今有了 Ivy，咱们能够对将来抱有更大的期待，Angular 无疑会迎来激动人心的时刻，你应该为之感到振奋。

 做者介绍

Santosh Yadav 拥有十多年的经验，他是 Angular 和 NgRx 的开源贡献者，也是 AngularInDepth 和 DotNetTricks 的做者。

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

 活动推荐

近年来，随着 jQuery 的落幕，三大框架的割据以及小程序的爆发，大前端的发展也经历了从静态页面到 JavaScript 跨时代的诞生，再从 PC 端到移动端的转向，以及由依赖后端到先后端分离的架构演变。

腾讯在线教育前端团队，近年来在大前端技术架构演进方面也有了很多突破，如 Hybird 方案、离线包方案、PWA 结合 *** 方案、以及 RN 动态化方案的落地和执行等。

此次 GMTC 全球大前端技术大会（深圳站）2019，咱们专门请到了 腾讯的前端高级工程师曹海歌，但愿能够从腾讯在线教育前端团队的实操案例中，深刻了解腾讯为提高研发效率，进行的前端工程化体系建设过程。扫描下方二维码或点击阅读原文，查看详情。