Angular的6.0.0版本發布了!這個主要版本很少關注底層框架,更多關注工具鏈,以及怎樣使它更容易快速適應Angular的未來變化。
作為本版本的一部分, 我們正在同步框架包(@angular/core,@angular/common,@angular/compile等r)、Angular CLI和Angular Material + CDK的主要版本。今天全部發布為6.0.0。我們進行了此更改以澄清交叉兼容性。這些項目的次要版本和補丁版將根據項目的需要發布。
查看我們更新日志中的完整的更改列表:framework,material + cdk,cli。
ng更新
ng update 是一個CLI新命令,可分析您的package.json,并使用Angular知識向您的應用程序推薦更新。要看它的實際操作,請查看我們的更新指南。
ng update不僅可以幫您采用正確的依賴版本,并保持您的依賴關系同步,第三方也可以使用原理圖提供更新腳本。如果您的某個依賴項提供了一個ng update原理圖,那么他們可以在需要進行重大更改時自動更新代碼!
ng update將不會取代你的軟件包管理器,而是基于npm或yarn來管理依賴關系。除了更新依賴關系和對等關系外,ng update還會將所需的變換應用于您的項目。
例如,ng update @angular/core該命令將更新所有的Angular框架包以及RxJS和TypeScript,并將運行這些包中的任何可行的原理圖以保持最新狀態。作為這個命令的一部分,我們將自動安裝rxjs-compat到您的應用程序中,讓RxJS v6的使用更加流暢。
我們希望在接下來的幾個月里看到更多的庫和包會添加ng update原理圖,并且已經聽到企業組件庫團隊將使用ng update以自動化方式推動重要更改以節省開發人員的時間。
了解有關ng update命令如何工作的更多信息。要開始創建您自己的ng update原理圖,請查看rxjs的package.json及其關的collection.json。
ng add
另一個CLI新命令ng add 使您的項目更容易添加新功能。ng add將使用你的軟件包管理器下載新的依賴關系并調用一個安裝腳本(作為原理圖實現),它可以使用配置更新項目。更改、添加其他依賴項 (例如 polyfills) 或腳手架包特定的初始化代碼。
現在可以在ng new新建的應用程序中嘗試一下以下功能:
ng add @angular/pwa:通過添加應用程序清單和service worker將您的應用程序變成PWA
ng add @ng-bootstrap/schematics:將ng-bootstrap添加到您的應用程序
ng add @angular/material:安裝設置Angular Material和主題并注冊新的入門組件到ng generate
ng add @clr/angular@next: 從VMWare安裝并設置清晰度
ng add @angular/elements:document-register-element.js為Angular Elements添加所需的填充代碼和依賴關系(請參見下文)
由于ng add建立在原理圖和npm注冊之上,我們希望庫和社區能夠幫助我們建立一個豐富的ng add支持包生態系統。
以Angular Material的ng-add原理圖為例,以幫助您開始構建自己的ng-add原理圖。
Angular Elements
Angular Elements的第一個版本專注于允許您在現有的Angular應用程序中引導Angular組件,方法是將它們注冊為自定義元素。我們在angular.io中廣泛使用它作為我們的內容管理系統的一部分,以允許通過嵌入式HTML動態引導功能。這取代了在靜態html內容中手動引導Angular組件的需求。
查看將組件注冊為自定義元素的示例或了解有關Angular Elements的更多信息。
強烈推薦我們的一位社區成員制作的Angular Elements快速入門視頻。
Angular Material+ CDK組件
最大的亮點是新增了用于顯示分層數據的樹型組件。遵循數據表組件的模式,CDK包含核心樹指令,而Angular Material則提供與頂層的Material Design樣式相同的體驗。我們最近談到了這個組件,所以請查看更多信息(視頻,幻燈片)。這些新的樹型組件都有樣式(Materail mat-tree)和無樣式(CDK?cdk-tree)兩種版本。
除了樹型組件,我們也有新的badge和bottom-sheet組件。badge組件有助于顯示少量有用的信息,例如未讀項目計數。bottom-sheet組件是從視口底部出現的一種特殊類型的以移動為中心的對話框,通常用于顯示動作后的選項列表。
@angular/cdk/overlay軟件包是CDK當今最強大的基礎架構之一。隨著v6的發布,該軟件包現在包含新的定位策略,可幫助在所有情況下智能地保持屏幕上的彈出窗口。
Angular Material入門組件
一旦運行ng add @angular/material添加Material到現入門應用程序,同時也將生成3個新的入門組件。
Material Sidenav
您現在可以生成包含具有應用程序名稱和側邊導航的工具欄的入門組件。該組件基于斷點進行響應。
運行:
ng generate @angular/material:material-nav --name=my-nav
這將創建如下入門組件:
Material Dashboard
現在您可以生成包含動態網格卡片列表的入門組件Dashboard。
運行:
ng generate @angular/material:material-dashboard --name=my-dashboard
Material Data Table
您可以生成一個初始數據表組件,該組件已預先配置了一個datasource用于排序和分頁的組件。
運行:
ng generate @angular/material:material-table --name=my-table
這將創建如下入門組件:
CLI工作區
CLI v6現在支持包含多個項目的工作區,如多個應用程序或庫。CLI項目現在將使用angular.json取代angular-cli.json來構建和配置項目。
每個CLI工作區都有項目,每個項目都有目標,每個目標都可以有配置。
{
??"projects": {
????"my-project-name": {
??????"projectType": "application",
??????"architect": {
????????"build": {
??????????"configurations": {
????????????"production": {},
????????????"demo": {},
????????????"staging": {},
??????????}
????????},
????????"serve": {},
????????"extract-i18n": {},
????????"test": {},
??????}
????},
????"my-project-name-e2e": {}
??},
}
庫支持
ng generate library
該命令將在CLI工作區內創建一個庫項目,并對其進行配置以進行測試和構建。
Tree Shakable Providers
為了使您的應用程序更小,我們已經將引用服務的模塊轉換為引用模塊的服務。現在我們只需將服務綁定到注入模塊的代碼庫中。
之前
NgModule({
??...
??providers: [MyService]
})
exportclassAppModule {}
import{ Injectable } from '@angular/core';
@Injectable()
exportclassMyService {
??constructor() { }
}
之后
import{ Injectable } from '@angular/core';
@Injectable({
??providedIn: 'root',
})
exportclassMyService {
??constructor() { }
}
動畫性能改進
我們已經更新了動畫的實現,不再需要網頁動畫填充代碼。這意味著您可以從應用程序中刪除此polyfill,并節省大約47KB的生產包大小,同時增加Safari中的動畫性能。
RxJS v6
Angular已更新為使用RxJS的v6版本。RxJS是幾個星期前發布v6的獨立項目。RxJS v6帶來了幾個主要的變化,還有一個向下兼容的軟件包>rxjs-compat,可以讓你的應用程序保持運行。
RxJS已重構使其更tree-shakable,確保只有您使用的 RxJS片斷包含在您的生產包中。
如果您使用ng update,您的應用程序應該繼續工作,但您可以了解有關5.5到6.0遷移的更多信息。
長期支持(LTS)
我們正在將長期支持擴展到所有主要版本。
之前我們宣布只有v4和v6有LTS版本,但為了使從一個主要到下一個更新更容易,并給更大項目規劃更多更新的時間,我們決定將從v4開始延長對所有主要版本的長期支持。
每個主要版本將支持18個月,大約6個月的積極開發,接下來是12個月的關鍵錯誤修正和安全補丁。
詳細了解Angular版本和發布。
如何更新到6.0.0
update.angular.io獲取更新您的應用程序的信息和指導。
更新通常遵循3個步驟,并將使用ng update新命令。
1. 更新@angular/cli
2. 更新您的Angular框架包
3. 更新其他依賴項
讓開發人員輕松掌握最新版本對我們來說非常重要,所以讓我們知道您在評論中對此版本的看法!
為什么使用Ivy呢?
我們在ng-conf提到了一個名為Ivy的倡議:我們的下一代渲染引擎。Ivy目前正在積極開發中,不屬于6.0版本的一部分。我們將在未來幾個月內盡快宣布Ivy的選擇性預覽版。請留意此博客中的最??新信息。