5月4日,Angular 6.0.0正式發布,新版本重點關注工具鏈以及工具鏈在Angular中的運行速度問題。
這次更新還包括框架包(@angular/core,@angular/common,@angular/compiler等)、Angular CLI、Angular Material + CDK,這主要是為了解決兼容問題,這些項目的補丁版本將根據項目需求發布。
ng update
ng update <package>是一種新的CLI命令,它可分析你的package.json,并基于對Angular的了解向你的應用程序推薦更新。
ng update可以幫助你使用正確版本的依賴包,讓你的依賴包與你的應用程序同步,使用schematics時,第三方還能提供腳本更新。如果你的某個依賴包提供了ng update schematic,那么它在進行重大更改時會自動更新代碼!
ng update不會取代你的軟件包管理器,而是在后臺使用npm或yarn來管理依賴包,除了更新和監視依賴包外,ng update還會在必要的時候對你的項目進行改造。
例如,命令ng update @angular/core將會更新所有的Angular包以及RxJS、FTypeScript,它還將在這些包中運行可用的schematics以保證版本是最新的。同時,這個命令還能自動安裝rxjs-compat到你的應用程序中,以使RxJS v6更加流暢。
ng add
另一項新的CLI命令ng add <package>將使你的項目更容易添加新功能。ng add使用軟件包管理器來下載新的依賴包并調用安裝腳本,它可以通過更改配置和添加額外的依賴包(如polyfills)來更新你的應用。
你可在新的ng new應用程序中嘗試以下動作:
-
ng add @angular/pwa:添加一個app manifest 和service worker,將你的應用程序變成PWA。
-
ng add @ng-bootstrap/schematics:將ng-bootstrap添加到你的應用程序中。
-
ng add @angular/material:安裝并設置Angular Material和主題,注冊新的初級組件 到ng generate中。
-
ng add @clr/[email protected]:安裝設置VMWare Clarity。
Angular Elements
Angular Elements的第一個版本專注于在現有的Angular應用程序中啟動Angular組件,方法是將它們注冊為Custom Elements,目前已被廣泛用于angular.io內容管理系統中,它嵌入HTML,可動態啟動系統功能。
Angular Material + CDK 組件
最值得一提的是用于顯示分層數據的樹形控件,遵循數據表組件的模式,CDK包含樹的核心指令,而Angular Material則提供與頂層的Material Design樣式相同的體驗。
于此同時,還更新了徽章(badge)和底部菜單欄的組件,徽章用于顯示小而有用的信息,例如未讀信息的數量。
目前,@angular/cdk/overlay軟件包是CDK最強大的基礎架構之一,你可以利用他們來構建自己的UI庫。
Angular Material 初級組件

一旦運行ng add @angular/material并添加材料到現有的應用程序中,就能夠生成3個新的初級組件。
Material Sidenav
Material Sidenav是帶有應用程序名稱和側面導航的工具欄的初級組件,它基于斷點窗口(breakpoints)進行響應。
運行:
ng generate @angular/material:material-nav
會生成以下組件:

Material Dashboard
Material Dashboard是包含動態網格列表的啟動組件。
運行:
ng generate @angular/material:material-dashboard
會生成以下組件:

Material Data Table
Material Data Table已預配置了一個用于排序和分頁的datasource。
如下圖:

CLI Workspaces
CLI v6現已支持多項目工作區,如多個應用程序或庫,CLI項目用angular.json取代angular-cli.json構建和配置項目。
每個CLI工作區都有項目,每個項目都有目標,每個目標都可以有配置。
angular.json:
{
"projects": {
"my-project-name": {
"projectType": "application",
"architect": {
"build": {
"configurations": {
"production": {},
"demo": {},
"staging": {},
}
},
"serve": {},
"extract-i18n": {},
"test": {},
}
},
"my-project-name-e2e": {}
},
}
庫支持
接下來介紹CLI最重要的一項功能:支持創建和構建庫。
ng generate library

該命令將在CLI工作區內創建一個庫,并對其進行配置以進行測試和構建。
Tree Shakable Providers
為了讓你的應用更小,我們將服務引用模塊改為模塊引用服務,這讓我們只需要構建在模塊里注入的服務。
之前:
app.module.ts:
@NgModule({
...
providers: [MyService]
})
export class AppModule {}
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() { }
}
動畫性能提升
更新后,以后將不再需要網頁動畫polyfill。這意味著你可以從應用程序中刪除此polyfill,可以節省大約47KB的內存,同時提高Safari中的動畫性能。
RxJS v6
RxJS v6也將被Angular 6使用,RxJS v6于上個月發布。RxJS v6帶來了一個向后兼容的軟件包rxjs-compat,它可以讓你的應用程序保持運行。
RxJS已重新安排,使其更具樹型動搖性,確保只有你使用的RxJS部分能放置在生產bundle中。
長期支持(LTS)
Angular表示他們正在將長期支持版本擴展到所有主版本中。
之前只有v4和v6是LTS版本,但為了使開發者從一個主版本更新到另一個主版本更容易,并給更多的項目充足時間來規劃更新,Angular團隊表示從v4開始,將擴大對所有主版本的長期支持。
每個主版本的支持時間是18個月,其中,前6個積極開發階段,接下的12個月是錯誤修正和安全補丁階段。
如何更新到Angular 6.0.0
請訪問更新指南,以獲取更新指導。

更新通常遵循3個步驟,請使用新ng update工具:
-
更新@ angular / cli
-
更新你的Angular框架包
-
更新其他依賴包
鏈接
原文鏈接:
https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4
更新指南:
https://update.angular.io/
Angular官方公告:
https://angular.io/guide/releases