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

相關文章
相關標籤/搜索