Angular 6 重點(diǎn)關(guān)注工具鏈以及工具鏈在 Angular 中的運(yùn)行速度問題逼庞。
這次更新還包括框架包（@angular/core、@angular/common、@angular/compiler 等）、Angular CLI字逗、Angular Material + CDK等
ng update
ng update 是一種新的 CLI 命令，它可分析你的package.json宅广，并基于對 Angular 的了解向你的應(yīng)用程序推薦更新葫掉。官方升級(jí)手冊鏈接如下：
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 來管理依賴包关翎，除了更新和監(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 , 開始學(xué)習(xí)如何創(chuàng)建您自己的 ng update 語法沮明，可以參考 rxjs 的 package.json 的入口，它關(guān)聯(lián)了 collection.json窍奋。
ng add
另一項(xiàng)新的 CLI 命令ng add 將使你的項(xiàng)目更容易添加新功能。ng add使用軟件包管理器來下載新的依賴包并調(diào)用安裝腳本酱畅，它可以通過更改配置和添加額外的依賴包（如 polyfills）來更新你的應(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 和主題，注冊新的初始組件 到ng generate中餐蔬。
- ng add @clr/angular@next：安裝設(shè)置 VMWare Clarity碎紊。
由于 ng add 基于 schematics 和 Npm 佑附，我們希望庫和社區(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 組件仗考，方法是將它們注冊為 Custom Elements音同，目前已被廣泛用于 angular.io 內(nèi)容管理系統(tǒng)中，它嵌入 HTML秃嗜，可動(dòng)態(tài)啟動(dòng)系統(tǒng)功能权均。
注冊 Angular Component 作為 custom element，或者學(xué)習(xí)更多的 Angular Elements锅锨。
Angular Material + CDK 組件
最值得一提的是用于顯示分層數(shù)據(jù)的樹形控件叽赊，遵循數(shù)據(jù)表組件的模式，CDK 包含樹的核心指令必搞，而 Angular Material 則提供與頂層的 Material Design 樣式相同的體驗(yàn)必指。
除了 tree 組件之外，我們還提供了 badge 和 bottom-sheet-components恕洲。Angular還更新了徽章（badge）和底部菜單欄的組件取劫，徽章用于顯示小而有用的信息，例如未讀信息的數(shù)量研侣。
目前谱邪，@angular/cdk/overlay 軟件包是 CDK 最強(qiáng)大的基礎(chǔ)架構(gòu)之一，你可以利用他們來構(gòu)建自己的 UI 庫庶诡。
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è)用于排序和分頁的datasource。例如：
ng generate @angular/material:material-table
想要了解更多的資料：Angular Material Schematics
CLI Workspaces
CLI v6 現(xiàn)已支持多項(xiàng)目工作區(qū)晴玖，如多個(gè)應(yīng)用程序或庫读存，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
庫支持
接下來介紹 CLI 最重要的一項(xiàng)功能：支持創(chuàng)建和構(gòu)建庫秀睛。例如尔当，執(zhí)行下面的代碼：
ng generate library <name>
該命令將在 CLI 工作區(qū)內(nèi)創(chuàng)建一個(gè)庫，并對其進(jìn)行配置以進(jìn)行測試和構(gòu)建蹂安。使用Angular CLI 創(chuàng)建庫可以查看下面的鏈接：
https://github.com/angular/angular-cli/wiki/stories-create-library
Tree Shakable Providers
為了讓你的應(yīng)用更小椭迎，我們將服務(wù)引用模塊改為模塊引用服務(wù)锐帜，這讓我們只需要構(gòu)建在模塊里注入的服務(wù)。例如畜号，之前的寫法是這樣的：
@NgModule({
...
providers: [ MyService ]
})
export class AppModule {}
服務(wù)的定義如下：
my-service.ts:
import { Injectable } from '@angular/core';
@Injectable()
export class MyService {
constructor() { }
}
那么缴阎，在新版的語法是下面這樣的，NgModule 不再需要引用弄兜。
my-service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class MyService {
constructor() { }
}
動(dòng)畫性能提升
更新后药蜻，以后將不再需要網(wǎng)頁動(dòng)畫 polyfill。這意味著你可以從應(yīng)用程序中刪除此 polyfill替饿，可以節(jié)省大約 47KB 的內(nèi)存语泽，同時(shí)提高 Safari 中的動(dòng)畫性能。
RxJS v6
Angular 6 也將支持RxJS v6视卢，RxJS v6 于上個(gè)月發(fā)布踱卵。RxJS v6 帶來了一個(gè)向后兼容的軟件包 rxjs-compat，它可以讓你的應(yīng)用程序保持運(yùn)行据过。關(guān)于如何從 RxJS 5.5 遷移到 6 惋砂，可以查看下面的鏈接資料：
https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md
長期支持（LTS）
Angular 表示他們正在將長期支持版本擴(kuò)展到所有主版本中。
之前只有 v4 和 v6 是 LTS 版本绳锅，但為了使開發(fā)者從一個(gè)主版本更新到另一個(gè)主版本更容易西饵，并給予項(xiàng)目充足的時(shí)間來規(guī)劃更新，Angular 團(tuán)隊(duì)表示從 v4 開始鳞芙，將擴(kuò)大對所有主版本的長期支持眷柔。
每個(gè)主版本的支持時(shí)間是18個(gè)月，其中原朝，前6個(gè)月是積極開發(fā)階段驯嘱，接下的 12 個(gè)月是錯(cuò)誤修正和安全補(bǔ)丁階段。
如何更新到 Angular 6.0.0
讀者可以訪問 update.angular.io 來得到升級(jí)應(yīng)用的信息和指導(dǎo)喳坠。
更新通常遵循 3 個(gè)步驟鞠评，請使用新 ng update 工具：
- 更新 @ angular / cli；
- 更新你的 Angular 框架包壕鹉；
- 更新其他依賴包剃幌。
Ivy
關(guān)于我們下一代的渲染引擎 Ivy，Ivy 當(dāng)前處于開發(fā)階段御板，還不是 v6 的一部分锥忿。關(guān)于更多的信息可以訪問官方關(guān)于Angular 6的發(fā)布信息。
