Angular 9即將發佈:改進Ivy編譯和渲染管道

Angular 9即將發佈:改進Ivy編譯和渲染管道


image.png


做者 | Santosh Yadav譯者 | 王強編輯 | 張之棟、王文婧你知道嗎?Angular 9 就要來啦!Angular 是基於 TypeScript 的 Web 應用程序框架,Angular 9 的一系列更新將爲開發者們帶來不小的影響。本文將主要從最新功能、重大更改、Angular 組件等方面對 Angular 9 的相關動態進行詳解。前端

Angular 9 RC 版已經發布了,這對 Angular 開發人員來講真是激動人心的時刻——我針對的不是 Angular 9 RC 的發佈,我說的是 Ivy,Ivy 如今是 Angular 中的默認渲染引擎。image.pngnode

相信我,若是你還沒感到興奮,請看看 Mathias Raacke 的推文:一個 Hello World 應用只有 7KB 大小!image.pnggit

下面咱們就來研究一下,看看除了 Ivy,Angular 還有哪些新功能。github

  新功能   添加對未裝飾類的遷移支持對指令和組件來講,直到 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/S1XKqMZeSweb

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 中,這也是它工做時須要的。shell

針對 Template 的 FullTemplateTypeCheck在使用 Angular 時,人們經常會遇到一個問題:爲何不嚴格檢查模板的類型?這是以前的狀況,可是如今,對於 *ngIf、*ngFor這樣的指令,甚至是管道都會是嚴格的,有 3 種模式可用於檢查模板的類型:
  • 基本模式:設置 fullTemplateTypeCheck: false 來啓用;
  • 徹底模式:設置 fullTemplateTypeCheck: true 來啓用;
  • 嚴格模式:設置 fullTemplateTypeCheck: true 和 strictTemplates: true 來啓用。

更多詳情請參閱這篇文檔: https://next.angular.io/guide/template-typechecknpm

TypeScript 3.6 支持

新版 Angular 如今須要 TypeScript 3.6 版本。下面是 Lars Gyrup Brink Nielsen 總結的 Angular 版本和對應的 TypeScript 版本支持。image.pngjson

請看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,咱們專門請到了 騰訊的前端高級工程師曹海歌,但願能夠從騰訊在線教育前端團隊的實操案例中,深刻了解騰訊爲提高研發效率,進行的前端工程化體系建設過程。掃描下方二維碼或點擊閱讀原文,查看詳情。

相關文章
相關標籤/搜索