Angular8穩定版修改概述

時間 2019-11-16

標籤 angular8 angular 穩定修改概述欄目 AngularJS 简体版

原文原文鏈接

在今天早些時候Angular團隊發佈了8.0.0穩定版。其實早在NgConf 2019大會上，演講者就已經說起了從工具到差分加載的許多內容以及更多使人敬畏的功能。下面是我對8.0.0一些新功能的簡單介紹，但願能夠幫助你們快速瞭解新版本。javascript

新功能

差分加載

根據您的browserlist 文件，在構建期間，Angular將爲其建立單獨的包polyfills。因此基本上你會有：
css

使用此功能將減少捆綁包大小。
java

但這是如何工做的？git

基本上，Angular將使用polyfill構建其餘文件，而且它們將注入nomodule 屬性。angularjs

<body> 
  <pp-root> </ pp-root>
<script type =「text / javascript」src =「runtime.js」> </ script> 
  <script type =「text / javascript」src =「es2015- polyfills.js 」 nomodule > </ script> 
  <script type =「 text / javascript「src =」polyfills.js「> </ script> 
  <script type =」text / javascript「src =」styles.js「> </ script> 
  <script type =」text / javascript「src =」vendor .js「> </ script> 
  <script type =」text / javascript「src =」main.js「> </ script> 
</ body>

nomodule屬性是一個布爾屬性，用於阻止腳本在支持模塊腳本的用戶代理中執行。這容許在現代用戶代理和舊用戶代理中的經典腳本中選擇性地執行模塊腳本.github

SVG做爲模板

您如今能夠將SVG文件用做模板。到目前爲止，咱們只能選擇使用內聯HTML或外部HTML做爲模板。web

@Component({
  selector: "app-icon",
  templateUrl: "./icon.component.svg",
  styleUrls: ["./icon.component.css"]
})
export class AppComponent {...}

Ivy渲染引擎實驗

雖然早在angular 6的時候就提出了Ivy，可是Ivy仍處於試驗階段，經過Angular 8版本，您能夠經過建立一個enable-ivy標誌設置爲true 的應用程序來測試它，以下所示。它不是徹底正常運行（選擇預覽），正如Igor Minar在ngConf 2019中建議的那樣，視圖引擎仍然推薦用於新應用。typescript

To enable Ivy in an existing project set enableIvyoption in the angularCompilerOptions in your project’s tsconfig.app.json
要在現有項目中使用Ivy的話，須要在tsconfig.app.json文件中設置angularCompilerOptions選項的enableIvy屬性npm

「angularCompilerOptions」： {「enableIvy」：true}

您也可使用新引擎建立新應用程序json

ng new my-app --enable-ivy

Ivy將提供如下優點，Angular 9中預計前3個功能：

編譯速度更快（V9）。
改進了模板的類型檢查（V9）。
較小的捆綁尺寸（V9）（若是您錯過了I / O 19，Vikram Subramanian顯示了一個4.3 KB版本的應用程序）。
向後兼容性。
我最喜歡的：你能夠調試模板（我確信不少開發人員須要這個功能）。

Bazel支持

Bazel是谷歌開源的另外一款工具，「咱們不喜歡谷歌」。正如Igor Minar所解釋的那樣，Bazel已經在內部使用了很長時間，如今可供全部人使用。您能夠參考Bazel文檔，並瞭解如何將其與Angular一塊兒使用。
你可能想知道：「Bazel準備好了嗎？」簡答：尚未。目前，它處於「選擇預覽」模式。

Bazel可做爲選擇加入，預計將包含@angular/cli在第9版中。

Bazel將提供如下優點：

更快的構建時間（對於第一次構建須要時間，但併發構建將更快），Angular已經在使用它，如今CI在7.5分鐘內完成，而不是在Bazel以前的60分鐘。
增量構建：您將可以僅構建和部署已更改的內容而不是整個應用程序。
您能夠彈出Bazel文件，默認狀況下它們是隱藏的。

您可使用如下命令添加Bazel支持：

ng add @ angular / bazel

或者，您也可使用Bazel建立一個新的應用程序：

npm install -g @ angular / bazel 
ng new my-app --colection = @ angular / bazel

Builders API

新版本容許咱們使用Builders API，也稱爲Architect API。
angular使用builders進行主要操做：serve ，build ，test ，lint和e2e 。您能夠在angular.json文件中查看使用過的構建器。

...
"projects": {
  "app-name": {
    ...
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        ...
      },
      "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        ...
      },
      "test": {
        "builder": "@angular-devkit/build-angular:karma",
        ...
      },
      "lint": {
        "builder": "@angular-devkit/build-angular:tslint",
        ...
      },
      "e2e": {
        "builder": "@angular-devkit/build-angular:protractor",
        ...
      }
    }
  }
}

從如今開始，咱們能夠建立自定義構建器。我認爲這是gulp/grunt「舊時代」中的命令。

基本上，構建器只是一個帶有一組命令的函數，您能夠createBuilder()從@angular-devkit/architect包傳遞給方法。

import { createBuilder } from '@angular-devkit/architect';
function customBuild(options, context) { 
  return new Promise((resolve, reject) => {
    // set of commands
  })
}
createBuilder(customBuild);

您能夠在此處查看內置的Angular構建器。

懶加載的變更

新版本不推薦使用loadChildren:string 懶惰加載模塊的語法。
在8.0.0以前，懶加載的使用方法以下：

loadChildren: './lazy/lazy.module#LazyModule';

如今的使用方法以下：

loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)

若是你有不少的懶加載的模塊，並但願經過軟件包作到這一點，能夠點擊此處參考

對AngularJS API中$location的支持

Angular團隊但願爲使用AngularJS的全部開發人員提供支持，並幫助他們升級到Angular。該團隊如今在升級時添加了對$ location服務的支持。添加了angular/common/upgrade這個新包。

容許從位置服務檢索狀態的功能。
添加跟蹤全部位置更改的功能。
它將容許您讀取hostname protocol port searchAngularJS中可用的屬性。
MockPlatformLocation 添加了API以測試位置服務。

Web Worker

Angular 8中添加了Web worker支持。如今，您能夠添加Web worker並將要在後臺運行的耗時進程委派給Web worker。運行如下命令以使用Angular CLI生成新的Web worker：

ng g webWorker <name>

Service Worker

隨着PWA的使用日益增加，對Service Worker進行了許多改進。

一項改進是SwRegistrationOptions增長了選項。
在一個域中支持多個應用。
閱讀Angular Doc上有關服務工做者的更多信息。

表單改進

添加了markAllAsTouched方法以標記全部的控件FormGroupas as touched。若是要觸發一個表單組中全部控件的驗證，這個方法將是很是有用的。以前咱們不得不使用下面的代碼片斷來實現相同的功能：

validateFormAndDisplayErrors(form: FormGroup) {
  Object.keys(form.controls).map((controlName) => {
    form.get(controlName).markAsTouched({onlySelf: true});
  });
}

從FormArray中清除全部元素

之前要刪除全部元素，formArray 咱們必須循環刪除第一個元素直到空：

while（formArray.length）{ 
  formArray.removeAt（0）; 
}

如今就不須要那樣操做了，直接使用clear方法就能夠完成：

formArray.clear()

對Typescript 3.4.x的支持

Angular如今使用TypeScript 3.3（v7使用3.2.x）。沒有太多突破性的變化 - 因此你可能應該作得很好。你能夠在這裏查看。

性能改善

爲每一個請求ServerRendererFactory2建立一個新的實例DomElementSchemaRegistry，這是很是昂貴的。如今它將共享全局實例DomElementSchemaRegistry.

棄用的API

從 @angular/platform-browser中刪除了已棄用的DOCUMENT

從@angular/platform-browser中移除了DOCUMENT。若是您使用DOCUMENT from @angular/platform-browser，則應今後處開始導入@angular/common。

@angular/http

@angular/http在Angular 5中不推薦使用package，但因爲@angular/platform-server依賴於它，因此仍然可用。從如今它已從包列表中刪除。

配置ViewChild / ContentChild查詢的時間

使用此功能時，必須提供靜態標誌以定義什麼時候須要解析ViewChild和ContentChild實例。

// Ensure Change Detection runs before accessing the instance
@ContentChild('foo', { static: false }) foo!: ElementRef;
// If you need to access it in ngOnInt hook
@ViewChild(TemplateRef, { static: true }) foo!: TemplateRef;

以上功能不適用於ViewChildren或ContentChildren。它們將在變動檢測運行後解析。

須要注意的是，設置static: true將不容許您從動態模板分辨率（例如*ngIf）得到結果。

添加了原理圖支持以將現有代碼遷移到此語法，由於將使用此語法Ivy 。您能夠運行ng update @angular/core以遷移現有代碼。