Angular 9 的新特性

注意: Angular 9 如今已经处于 release candidate 阶段,随时可能发布。
发布以前,让咱们先了解一下 Angular 9 中的新特性。

Ivy 来了

Angular 8 中虽然支持试用 Ivy Renderer,可是默认的 Complier Engine 仍是 View Engine,而且须要修改 tsconfig.json 文件:git

"angularCompilerOptions": {    "enableIvy": true  }
JavaScript复制代码

Angular 9 中则弃用了 View Engine,全面使用 Ivy 做为默认 Compiler。npm

Angular Core 类型安全的变化

Angular 的测试 API - TestBed 发生了变化。 Angular 8版本中的 TestBed.get() 方法再也不接受字符串值的参数。这是一个破坏性更新,所以,官方决定在 Angular 9 版本中回滚该功能。为解决类型安全的问题,官方将提供 TestBed.inject() 函数,并摒弃 TestBed.get() 函数。json

TestBed.get(ChangeDetectorRef) // any

TestBed.inject(ChangeDetectorRef) // ChangeDetectorRef复制代码

ModuleWIthProviders 支持

这一变更对 Angular Library 的开发者很重要。若是开发者在 Angular 9 以前使用过 ModuleWIthProviders,不管你以前是否对其进行强类型约束,V9 版本都须要使用泛型 ModuleWithProviders<T> 约束 module 的类型。 V9 以前的版本实现可能以下:api

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

V9 版本的实现则以下:安全

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

升级操做能够直接经过bash

ng update复制代码

实现一键升级,所以 Library 的开发者并不须要担忧升级 Angular 版本会带来额外的代码工做量(虽然确定仍是会有坑)。框架

Angular Forms 的变化

<ngForm></ngForm> 再也不是官方承认的元素选择器了,做为代替,开发者须要使用 <ng-form></ng-form> 代替。由于这个变化在 V8 已经做为警告信息提示开发者,所以相关的警告信息也将被移除。 除此以外,FormsModule.withConfig 也被移除了,如今开发者能够直接使用 FormsModuleide

依赖注入机制在 Core 中的变化

DI 在新版本中的变化并不大,只是作了一些优化:providedIn 参数值支持的范围更大了(platform 之类的做用域):函数

@Injectable({    providedIn: 'platform'  })  
class MyService {...}复制代码

语言服务的提高

在 V9 版本中对 VSCode 和 WebStorm 的语言服务支持更好了。 V9 版本中对连接的定义一致性更好,样式 url 的定义也将做为模板 url 进行检查;甚至不指向实际项目文件的 url 也将会被正确地检测。工具

除了对IDE的支持以外,TypeScriptHost 这类的诊断工具能够经过调试方法和错误方法进行基于严重程度区分的日志记录。

Service Worker 的更新

在 V9 版本中,service worker 中已经被废弃的 versioned files option 将会从 service worker asset group 配置中移除。 ngsw-config.json 文件将会变化:

former:

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

current:

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

I18n 的优化

V9 版本中,Angular 官方也基于 Ivy 对 I18n 的相关代码进行了重构,确保其能够在编译时内联。

API Extractor 的更新

Angular是一个合体框架,所以其依赖于许多其余服务和库。 可是,要跟上全部依赖库和服务的更新、解决方案和新特性就成为了一个问题。 在 Angular V9 版本中,这些库将被追踪并将API提取器更新为最新版本。经过使用 Bazel 在每一次构建时检测库的 API 内容, 生成更新文档提示开发者内容变动和新功能发布。 这样的方式能够确保维护成本不会升高,同时也能确保内容的时效性。

Angular 组件的更新

对于 Angular CDK,Hammer.js 库进行了更新,以前 Hammer.js 是 Angular CDK 的必须部分。 V9 版本将 Hammer.js 隔离,支持按照以下方式按需引入:

import `HammerModule` from [@angular/platform-browser]复制代码

V9 版本中还加入了 Clipboard ModuleAngular Google Map Module 这些官方组件。

同时须要注意的是,引入 angular material component 的方式发生了改变:

  • 再也不支持第一级入口引入 @angular/material
  • 须要经过二级入口 @angular/material/button 进行引入。

升级到V9的更新指南

update.angular.io 提供了升级到 Angular V9 的交互式指南。

更新 CLI 应用

若是你的应用由 Angular CLI 搭建,就能够借助于 npm update scripts 帮助你进行更新:

ng update @angular/core@8 @angular/cli@8  
git add .  
git commit --all -m "build: update Angular packages to latest 8.x version"  
ng update @angular/cli @angular/core --next`复制代码

今天发现v9发布也就只几个月,如今发现V10 就出了10.0.0-next.3 版了,更新有点紧密啊

参考:

zhuanlan.zhihu.com/p/102947150

相关文章
相关标签/搜索