Angular6.0正式發佈

時間 2019-11-16

標籤 angular6.0 angular 正式發佈欄目 AngularJS 简体版

原文原文鏈接

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

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

這次更新信息以下：java

更新依賴關係：nginx

@angular/core 如今依賴於：git

TypeScript 2.7
RxJS 6.0.0
tslib 1.9.0

@angular/platform-server 如今依賴於 Domino 2.0github

特性的小改動：npm

animations: 只能使用 WA-polyfill 和 AnimationBuilder
animations: 在轉換匹配器中暴露元素和參數
common: 在 NgIf 中使用非模板元素時更好的錯誤消息
common: 導出函數來格式化數字，百分數，貨幣和日期
compiler: 實現「enableIvy」編譯選項
core: 添加綁定名稱到內容更改錯誤

bug 修復：json

即便在 noOp 動畫期間也要報告正確的 totalTime 值
避免在路由器返回/刷新期間插入動畫
修復增長/減小別名示例
修正 Observable 方法的映射

更新功能信息:bootstrap

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 的一個預覽版。