Angular6.0正式釋出

Angular v6 新版本重點關注工具鏈以及工具鏈在 Angular 中的執行速度問題。

Angular v6 是統一整體框架、Material 和 CLI 三大 Angular 元件的第一個版本，此次更新更多地關注於工具鏈上，以使其具有更好的可移植性。

此次更新資訊如下：

更新依賴關係：

@angular/core 現在依賴於：

TypeScript 2.7
RxJS 6.0.0
tslib 1.9.0

@angular/platform-server 現在依賴於 Domino 2.0

特性的小改動：

animations: 只能使用 WA-polyfill 和 AnimationBuilder
animations: 在轉換匹配器中暴露元素和引數
common: 在 NgIf 中使用非模板元素時更好的錯誤訊息
common: 匯出函式來格式化數字，百分數，貨幣和日期
compiler: 實現“enableIvy”編譯選項
core: 新增繫結名稱到內容更改錯誤

bug 修復：

即使在 noOp 動畫期間也要報告正確的 totalTime 值
避免在路由器返回/重新整理期間插入動畫
修復增加/減少別名示例
修正 Observable 方法的對映

更新功能資訊:

1. ng update

ng update <package> 是一個新的 CLI 命令，用於分析 package.json 並使用其關於 Angular 的知識來更新您的應用。請檢視升級手冊來檢視其行為。

不僅可以使用 ng update來幫助您適配正確版本的依賴項，並保持依賴同步，而且第三方也可以使用 schematics 來提供 update 指令碼命令。如果您的某個依賴庫提供了 ng update 語法，在其有大更新的時候，就可以自動更新您的程式碼了。

ng update 並不會替換您的包管理器，而是使用 npm 或者 yarn在底層管理依賴，然後更新依賴，ng update 將對您的專案進行必要的轉換。

例如，ng update @angular/core 將會更新所有的 Angular 框架包，比如：RxJS 和 TypeScript，並執行這些包中可用的 schematics 來保持最新。作為命令的一部分，我們將會自動安裝 rxjs-compat 到您的應用中以平滑遷移。

我們期待更多的庫和包在隨後支援 ng update 語法，我們已經聽到一些企業庫的團隊在計劃使用 ng update 來自動更新重要的變更升級，以減少開發時間。

學習更多關於如何使用 ng update , 開始學習如何建立您自己的 ng update 語法，可以參考 rxjs 的 package.json 的入口，它關聯了 collection.json。

2. ng add

另一個新的 CLI 命令是 ng add，它可以使您新增新包變得更加容易。ng add 將使用您的包管理器來下載新的依賴項，並執行安裝指令碼（以 schematics 實現）。通過配置檔案來更新專案。新增額外的依賴項（例如 polyfill 等），或者執行包特定的初始化程式碼。

可以在您的使用 ng new 建立的新專案上試一下下面的命令：

ng add @angular/pwa, 通過為您的應用新增 manifest 檔案和 service worker 將其轉換為 PWA 專案
ng add @ng-bootstrap/schematics, 將 ng-bootstrap 新增到專案中
ng add @angular/metarial, 安裝與設定 Angular Metarial ，並使用 ng generate 新增新的啟動元件。
ng add @clr/angular@next, 從 VMWare 安裝和設定 Clarity。
ng add @angular/elements, 為 Angular elements 安裝 document-register-element.js 和依賴項。由於 ng add 基於 schematics 和 Npm ，我們希望庫和社群支援我們構建一個 ng add 支援包的生態圈。

請檢視 Angular Metarial 的 ng add schemetic ，作為示例來幫助您開始建立您自己的 ng add。

3. Angular Elements

第一個版本的 Angular Elements 支援您在現有的 Angular 應用中通過註冊 Angular Component 作為自定義元素。我們在 angular.io 內容管理系統中使用這種擴充套件能力，通過嵌入 HTML 來支援動態。這替換掉了手動啟動 Angular 元件。

請檢視註冊 Angular Component 作為 custom element，或者學習更多的 Angular Elements.

已經有一個社群成員釋出了 Angular Elements Quick Start, 我們非常建議您參考。

4. Angular Metarial + CDK component

最大的更新是增加了新的 tree 元件以顯示層次結構，遵循 table 元件的模式，CDK 支援了核心 tree 指令，Angular Metarial 通過 Metarial Design 提供了一致的體驗，我們最近提供了一個關於它的內容，可以參考（video, slide ）.新的 tree 元件有兩種風格：（Metarial 風格）mat-tree 和未修飾的版本 cdk-tree

除了 tree 元件之外，我們還提供了 badge 和 bottom-sheet-components。徽章用於顯示小的幫助資訊。例如未讀專案數量等等，Bottom-sheet 是移動裝置專用的對話方塊，通常用於提供一系列動作的選項。

@angular/cdk/overlay 是 CDK 中非常有用的包，在新的 v6 版中，其包含新的定位邏輯，以在各種場景下幫助彈出。

5. Angular Metarial Starter Components

一旦您執行 ng add @angular/metarial 將 Metarial 新增到您的專案中，您將得到 3 個新的 starter 元件：

Metarial SideNav 您現在可以生成一個包含 app 名稱的 toolbar 和邊欄導航的起步元件。

執行

ng generate @angular/material:material-nav
複製程式碼

將會生成這樣的起步元件。

Metarial Dashboard 您可以生成一個包含動態表格的卡片列表。

執行

ng generate  @angular/material:material-dashboard
複製程式碼

可以生成這樣的元件。

Material Data Table 您可以生成支援排序、分頁的預配置 datasource 的資料表元件。

執行

ng generate  @angular/material:material-table
複製程式碼

將會生成這樣的元件。

在這裡檢視更多資料：Angular Material Schematics

6. CLI Workspaces

Angular CLI v6 現在支援包含多個專案的工作空間，比如多個應用或者庫。CLI 專案現在將使用 angular.json 來替代 .angular-cli.json 進行配置和構建。

每個 CLI 可以有多個專案，每個專案有 target, 每個 target 有配置檔案。

{
   "projects": {
      "my-project-name“： {
             "projectType": "application",
             "architect": {
                      "build": {
                            "configurations”: {
                                    "production": {},
                                    "demo": {},
                                    "staging": {},
                                                      }
                                  },
                       "serve": {},
                       "extrace-i18n": {},
                       "test": {},
                              }

                                    },
              "my-project-name-e2e": {}
                    }
}
複製程式碼

更多資訊請參考：新的配置檔案。

庫的支援被廣泛請求的一個 CLI 特性現在支援了：建立和構建庫。我很榮幸介紹它。

ng generate  library <name>
複製程式碼

該命令將會在您的 CLI 工作空間建立一個庫專案，並配置其測試和構建。

更多資訊請參考：使用 Angular CLI 建立庫

8. Tree Shakable 提供器

為使您的應用尺寸更小，我們從模組引用服務變成了服務引用模組。這使得我們可以僅僅打包模組中注入到程式碼中的服務。

以前

@NgModule({
   ...
   providers: [ MyService ]
})
export class AppModule {}
 
複製程式碼

其中，服務的定義

import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
   constructor() {}
}
 
複製程式碼

以後的用法

不需要在模組中引用。

import { Injectable } from '@angular/core';

@Injectable( {
    providedIn: 'root',
})
export class MyService {
   constructor() {}
}
複製程式碼

更多資訊，參考依賴注入。

9. 動畫效能改進

我們已經更新了動畫實現，不再需要 Web animations polyfill ，這意味著您可以從應用中刪除這個 polyfill，並節省大約 47K 的打包尺寸，同時提升了在 Safari 中的效能。

10. RxJS v6

Angular 已經升級到 RxJS v6。RxJS 是 Angular 的一個依賴項，其在幾周前正式釋出了 v6。RxJS v6 帶來了多個重要的更新，還提供了反向相容庫 rxjs-compat，可以保持您的應用繼續工作。

RxJS 進行了重新組織以便於 Tree shakable, 以確保只有用到的 RxJS 部分打包到應用中。

如果您使用 ng update, 您的應用將會保持工作，您可以從 RxJS 5.5 遷移到 6 得到更多資訊。

11. 長期支援

我們擴充套件了我們的長期支援條款到所有主要釋出版本。

以前，我們宣告只有 v4-v6 是長期支援的版本。但是為了是的從某個主要版本升級到下一個更加容易，並給予大的專案更多的時間來計劃升級，我們決定擴充套件到支援從 v4 開始的所有主要版本。

每個主要釋出將會支援 18 個月，包括 6 個月的活動開發和 12 個月的關鍵 bug 修復和安全補丁。

更多資訊可以參考 Angular 版本和釋出。

12. 如何更新到 6.0.0

訪問 update.angular.io 來得到升級應用的資訊和指導。

升級通常包括 3 步，並可以從 ng update 工具獲得好處。

升級 @angular/cli
升級 Angular 框架包
升級其它依賴對於我們來說，讓開發者保持最新版本的更新特別重要，所以，如果您有什麼建議請讓我們知道。

13. Ivy 怎麼樣了？

關於我們下一代的渲染引擎 Ivy，Ivy 當前處於開發階段，還不是 v6 的一部分。在隨後的幾個月，我們將會宣告 Ivy 的一個預覽版。