Angular 6 重點(diǎn)關(guān)注工具鏈以及工具鏈在 Angular 中的運(yùn)行速度問(wèn)題。
這次更新還包括框架包（@angular/core、@angular/common、@angular/compiler 等）、Angular CLI、Angular Material + CDK等
ng update
ng update 是一種新的 CLI 命令，它可分析你的package.json，并基于對(duì) Angular 的了解向你的應(yīng)用程序推薦更新。官方升級(jí)手冊(cè)鏈接如下：
https://update.angular.io/
ng update可以幫助你使用正確版本的依賴包，讓你的依賴包與你的應(yīng)用程序同步，使用 schematics 時(shí)，第三方還能提供腳本更新。如果你的某個(gè)依賴包提供了ng update schematic，那么它在進(jìn)行重大更改時(shí)會(huì)自動(dòng)更新代碼！
ng update不會(huì)取代你的軟件包管理器，而是在后臺(tái)使用 npm 或 yarn 來(lái)管理依賴包，除了更新和監(jiān)視依賴包外，ng update還會(huì)在必要的時(shí)候?qū)δ愕捻?xiàng)目進(jìn)行改造。
例如，命令ng update @angular/core將會(huì)更新所有的 Angular 包以及 RxJS、FTypeScript，它還將在這些包中運(yùn)行可用的 schematics 以保證版本是最新的。同時(shí)，這個(gè)命令還能自動(dòng)安裝rxjs-compat到你的應(yīng)用程序中，以使 RxJS v6 更加流暢。
學(xué)習(xí)更多關(guān)于如何使用ng update , 開(kāi)始學(xué)習(xí)如何創(chuàng)建您自己的 ng update 語(yǔ)法，可以參考 rxjs 的 package.json 的入口，它關(guān)聯(lián)了 collection.json。
ng add
另一項(xiàng)新的 CLI 命令ng add 將使你的項(xiàng)目更容易添加新功能。ng add使用軟件包管理器來(lái)下載新的依賴包并調(diào)用安裝腳本，它可以通過(guò)更改配置和添加額外的依賴包（如 polyfills）來(lái)更新你的應(yīng)用。
你可在新的ng new應(yīng)用程序中嘗試以下動(dòng)作：
- ng add @angular/pwa：添加一個(gè) app manifest 和 service worker，將你的應(yīng)用程序變成 PWA。
- ng add @ng-bootstrap/schematics：將ng-bootstrap添加到你的應(yīng)用程序中。
- ng add @angular/material：安裝并設(shè)置 Angular Material 和主題，注冊(cè)新的初始組件 到ng generate中。
- ng add @clr/angular@next：安裝設(shè)置 VMWare Clarity。
由于 ng add 基于 schematics 和 Npm ，我們希望庫(kù)和社區(qū)支持我們構(gòu)建一個(gè) ng add 支持包的生態(tài)圈。創(chuàng)建ng add的示例如下：Angular Metarial 的 ng add schemetic
Angular Elements
Angular Elements 的第一個(gè)版本專注于在現(xiàn)有的 Angular 應(yīng)用程序中啟動(dòng) Angular 組件，方法是將它們注冊(cè)為 Custom Elements，目前已被廣泛用于 angular.io 內(nèi)容管理系統(tǒng)中，它嵌入 HTML，可動(dòng)態(tài)啟動(dòng)系統(tǒng)功能。
注冊(cè) Angular Component 作為 custom element，或者學(xué)習(xí)更多的 Angular Elements。
Angular Material + CDK 組件
最值得一提的是用于顯示分層數(shù)據(jù)的樹(shù)形控件，遵循數(shù)據(jù)表組件的模式，CDK 包含樹(shù)的核心指令，而 Angular Material 則提供與頂層的 Material Design 樣式相同的體驗(yàn)。
除了 tree 組件之外，我們還提供了 badge 和 bottom-sheet-components。Angular還更新了徽章（badge）和底部菜單欄的組件，徽章用于顯示小而有用的信息，例如未讀信息的數(shù)量。
目前，@angular/cdk/overlay 軟件包是 CDK 最強(qiáng)大的基礎(chǔ)架構(gòu)之一，你可以利用他們來(lái)構(gòu)建自己的 UI 庫(kù)。
Angular Material 初始組件
一旦運(yùn)行ng add @angular/material并添加材料到現(xiàn)有的應(yīng)用程序中，就能夠生成 3 個(gè)新的初始組件。
Material Sidenav
Material Sidenav 是帶有應(yīng)用程序名稱和側(cè)面導(dǎo)航的工具欄的初始組件，它基于斷點(diǎn)窗口（breakpoints）進(jìn)行響應(yīng)。例如，運(yùn)行如下代碼：
ng generate @angular/material:material-nav
Material Dashboard
Material Dashboard 是包含動(dòng)態(tài)網(wǎng)格列表的啟動(dòng)組件。例如，運(yùn)行下面的代碼：
ng generate @angular/material:material-dashboard
Material Data Table
Material Data Table 已預(yù)配置了一個(gè)用于排序和分頁(yè)的datasource。例如：
ng generate @angular/material:material-table
想要了解更多的資料：Angular Material Schematics
CLI Workspaces
CLI v6 現(xiàn)已支持多項(xiàng)目工作區(qū)，如多個(gè)應(yīng)用程序或庫(kù)，CLI 項(xiàng)目用 angular.json 取代 angular-cli.json 構(gòu)建和配置項(xiàng)目。每個(gè) CLI 工作區(qū)都有項(xiàng)目，每個(gè)項(xiàng)目都有目標(biāo)，每個(gè)目標(biāo)都可以有配置。例如：
angular.json:
{
"projects": {
"my-project-name": {
"projectType": "application",
"architect": {
"build": {
"configurations": {
"production": {},
"demo": {},
"staging": {},
}
},
"serve": {},
"extract-i18n": {},
"test": {},
}
},
"my-project-name-e2e": {}
},
}
關(guān)于angular-cli.json更多的配置可以參考下面的鏈接：
https://github.com/angular/angular-cli/wiki/angular-workspace
庫(kù)支持
接下來(lái)介紹 CLI 最重要的一項(xiàng)功能：支持創(chuàng)建和構(gòu)建庫(kù)。例如，執(zhí)行下面的代碼：
ng generate library <name>
該命令將在 CLI 工作區(qū)內(nèi)創(chuàng)建一個(gè)庫(kù)，并對(duì)其進(jìn)行配置以進(jìn)行測(cè)試和構(gòu)建。使用Angular CLI 創(chuàng)建庫(kù)可以查看下面的鏈接：
https://github.com/angular/angular-cli/wiki/stories-create-library
Tree Shakable Providers
為了讓你的應(yīng)用更小，我們將服務(wù)引用模塊改為模塊引用服務(wù)，這讓我們只需要構(gòu)建在模塊里注入的服務(wù)。例如，之前的寫(xiě)法是這樣的：
@NgModule({
...
providers: [ MyService ]
})
export class AppModule {}
服務(wù)的定義如下：
my-service.ts:
import { Injectable } from '@angular/core';
@Injectable()
export class MyService {
constructor() { }
}
那么，在新版的語(yǔ)法是下面這樣的，NgModule 不再需要引用。
my-service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class MyService {
constructor() { }
}
動(dòng)畫(huà)性能提升
更新后，以后將不再需要網(wǎng)頁(yè)動(dòng)畫(huà) polyfill。這意味著你可以從應(yīng)用程序中刪除此 polyfill，可以節(jié)省大約 47KB 的內(nèi)存，同時(shí)提高 Safari 中的動(dòng)畫(huà)性能。
RxJS v6
Angular 6 也將支持RxJS v6，RxJS v6 于上個(gè)月發(fā)布。RxJS v6 帶來(lái)了一個(gè)向后兼容的軟件包 rxjs-compat，它可以讓你的應(yīng)用程序保持運(yùn)行。關(guān)于如何從 RxJS 5.5 遷移到 6 ，可以查看下面的鏈接資料：
https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md
長(zhǎng)期支持（LTS）
Angular 表示他們正在將長(zhǎng)期支持版本擴(kuò)展到所有主版本中。
之前只有 v4 和 v6 是 LTS 版本，但為了使開(kāi)發(fā)者從一個(gè)主版本更新到另一個(gè)主版本更容易，并給予項(xiàng)目充足的時(shí)間來(lái)規(guī)劃更新，Angular 團(tuán)隊(duì)表示從 v4 開(kāi)始，將擴(kuò)大對(duì)所有主版本的長(zhǎng)期支持。
每個(gè)主版本的支持時(shí)間是18個(gè)月，其中，前6個(gè)月是積極開(kāi)發(fā)階段，接下的 12 個(gè)月是錯(cuò)誤修正和安全補(bǔ)丁階段。
如何更新到 Angular 6.0.0
讀者可以訪問(wèn) update.angular.io 來(lái)得到升級(jí)應(yīng)用的信息和指導(dǎo)。
更新通常遵循 3 個(gè)步驟，請(qǐng)使用新 ng update 工具：
- 更新 @ angular / cli；
- 更新你的 Angular 框架包；
- 更新其他依賴包。
Ivy
關(guān)于我們下一代的渲染引擎 Ivy，Ivy 當(dāng)前處于開(kāi)發(fā)階段，還不是 v6 的一部分。關(guān)于更多的信息可以訪問(wèn)官方關(guān)于Angular 6的發(fā)布信息。
