Angular 8的新特性介紹

尋找石頭魚發表於2019-05-29
Angular

在今天早些時候Angular團隊釋出了8.0.0穩定版。其實早在NgConf 2019大會上，演講者就已經提及了從工具到差分載入的許多內容以及更多令人敬畏的功能。下面是我對8.0.0一些新功能的簡單介紹，希望可以幫助大家快速瞭解新版本。

新功能

差分載入

根據您的browserlist 檔案，在構建期間，Angular將為其建立單獨的包polyfills。所以基本上你會有：
Angular 8的新特性介紹

使用此功能將減小捆綁包大小。
Angular 8的新特性介紹

但這是如何工作的？

基本上，Angular將使用polyfill構建其他檔案，並且它們將注入nomodule 屬性。

<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屬性是一個布林屬性，用於阻止指令碼在支援模組指令碼的使用者代理中執行。這允許在現代使用者代理和舊使用者代理中的經典指令碼中選擇性地執行模組指令碼.

SVG作為模板

您現在可以將SVG檔案用作模板。到目前為止，我們只能選擇使用內聯HTML或外部HTML作為模板。

@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中建議的那樣，檢視引擎仍然推薦用於新應用。

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屬性

“angularCompilerOptions”： {“enableIvy”：true}

您也可以使用新引擎建立新應用程式

ng new my-app --enable-ivy

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

  1. 編譯速度更快（V9）。
  2. 改進了模板的型別檢查（V9）。
  3. 較小的捆綁尺寸（V9）（如果您錯過了I / O 19，Vikram Subramanian顯示了一個4.3 KB版本的應用程式）。
  4. 向後相容性。
  5. 我最喜歡的：你可以除錯模板（我確信很多開發人員需要這個功能）。

Bazel支援

Bazel是谷歌開源的另一款工具，“我們不喜歡谷歌”。正如Igor Minar所解釋的那樣，Bazel已經在內部使用了很長時間，現在可供所有人使用。您可以參考Bazel文件，並瞭解如何將其與Angular一起使用。
你可能想知道：“Bazel準備好了嗎？”簡答：還沒有。目前，它處於“選擇預覽”模式。

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

Bazel將提供以下優勢：

  1. 更快的構建時間（對於第一次構建需要時間，但併發構建將更快），Angular已經在使用它，現在CI在7.5分鐘內完成，而不是在Bazel之前的60分鐘。
  2. 增量構建：您將能夠僅構建和部署已更改的內容而不是整個應用程式。
  3. 您可以彈出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這個新包。

  1. 允許從位置服務檢索狀態的功能。
  2. 新增跟蹤所有位置更改的功能。
  3. 它將允許您讀取hostname protocol port searchAngularJS中可用的屬性。
  4. 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進行了許多改進。

  1. 一項改進是SwRegistrationOptions增加了選項。
  2. 在一個域中支援多個應用。
  3. 閱讀Angular Doc上有關服務工作者的更多資訊。

表單改進

  1. 新增了markAllAsTouched方法以標記所有的控制元件FormGroupas as touched。如果要觸發一個表單組中所有控制元件的驗證，這個方法將是非常有用的。之前我們不得不使用下面的程式碼片段來實現相同的功能：
validateFormAndDisplayErrors(form: FormGroup) {
  Object.keys(form.controls).map((controlName) => {
    form.get(controlName).markAsTouched({onlySelf: true});
  });
}
  1. 從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例項。

使用此功能時，必須提供靜態標誌以定義何時需要解析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以遷移現有程式碼。

Angular Material

Angular Material工程重新命名為Angular Components。包還是跟以前保持一樣的。

結論

以上就是angular 8版本的一些改動。總體來說變化不是很大，延續了angular每年一個穩定版的習慣。

相關文章