# 賦予 Angular 全新的生命力：Angular 6 終於正式釋出！ 期待的一刻終於來臨，Angular 6 終於在今天正式釋出。這個版本帶來非常多新玩意，同時又不會對現有 Angular 開發者帶來衝擊，這就是 Angular 生態圈最為人津津樂道的部分。本篇文章就讓我來細說這次 Angular 6 的全新改變吧！ ## 666 這一版也是我跟幾位 Angular 好友間俗稱的 666 版本，因為所有 Angular 周遭的開發工具也全部都改成 6.0.0 版，例如 Angular 核心套件 (@angular/core, @angular/common, @angular/compiler, ... etc.)、Angular CLI、Angular Material + CDK 等等。而且從 v6 版開始，所有 Angular 相關工具的 Major 版本都會開始同步，但是 Minor 與 Patch 版本還是會依據不同套件分別更新。完整的變更紀錄請參見 [Angular](https://github.com/angular/angular/blob/master/CHANGELOG.md)、[Material+CDK](https://github.com/angular/material2/blob/master/CHANGELOG.md)、[CLI](https://github.com/angular/angular-cli/releases) 的 Release Notes。 ## ng update 這版的更新幅度相當大，不過你只要執行 **ng update** 就會全自動將**專案相依套件**一併升級完成，各位不要誤以為他只有更新 package.json 的版號而已，他還會修改你專案中的程式碼，直接調整為全新的寫法，讓你的 Angular 應用程式效能立即提升，封裝部署的 JavaScript 檔案大小也會大幅降低。不只這樣，執行 **ng update --all** 還會遞迴尋找每個 npm 套件中是否有透過 [Schematics](https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2) 實作 **ng update** 命令，有的話就會一併執行更新，實在感動到痛哭流涕！ 想知道 **ng update** 如何運作，可以參考 [how the](https://github.com/angular/angular-cli/blob/main/docs/specifications/update.md) `[ng update](https://github.com/angular/angular-cli/blob/main/docs/specifications/update.md)` [command works](https://github.com/angular/angular-cli/blob/main/docs/specifications/update.md) 文章。當然，你也可以自己實作 **ng update** 命令！ ## ng add 全新的 **ng add ** 命令，也可以將全新的 Angular 能力直接加入到你的 #現有專案 中，他不只是幫你安裝 npm 套件而已，還直接幫你把該寫的 Code 加好，只留下設定檔給你調整，這絕對是原力啊！ - 只要 **ng add @angular/pwa** 就可以將網站轉成 PWA 架構，自動加入 app manifest 與 service worker 設定。 - 只要 **ng add @ng-bootstrap/schematics** 就能加入 [ng-bootstrap](https://ng-bootstrap.github.io/) 套件。 - 只要 **ng add @angular/material** 就能自動裝好 ng-material，也可以透過以下 ng generate 命令來建立 3 種不同的範例骨架： - ng generate @angular/material:material-nav - ng generate @angular/material:material-dashboard - ng generate @angular/material:material-table - [Learn more about the available Angular Material Schematics](http://material.angular.io/guide/schematics). - 只要 **ng add @clr/angular@next** 就可以自動安裝並設定好 VMWare 做的 [Clarity Design System](https://clarity.design/) ( [GitHub](https://github.com/vmware/clarity/) )。 - 只要 **ng add @angular/elements** 就可以加入 Angular Elements 與所有相依套件。 ## Angular Elements 這次推出的 Angular Elements 可以輕易地將 **Angular 元件** 封裝成一個 **自訂元素** (Custom Elements)，可以讓現成的 Angular 元件變成一個 Web Component 來用。所以你現有的網站，只要加入含有 Angular Elements 的 JavaScript 檔，不管你是用 Vue, React, jQuery 都沒差，直接丟一個**自訂元素**進去，你的 Angular 就會自動跑起來，相當神奇！ 你可以到 [angular-f3nrpv](https://stackblitz.com/edit/angular-f3nrpv?file=app%2Fapp.module.ts "https://stackblitz.com/edit/angular-f3nrpv?file=app%2Fapp.module.ts") 查看 Angular Elements 的實際範例，也可以到 [Angular Elements Overview](https://angular.io/guide/elements) 學習相關用法。這裡還有個 [Angular Elements Quick Start](https://www.youtube.com/watch?v=4u9_kdkvTsc) 教學影片，幫你快速上手。 ## 全新 Angular Material + CDK 元件 Angular Material 與 CDK 在這版加入了一些新的元件可用，主要新增了 Tree 元件，在 Material 叫做 `mat-tree` 或在 CDK 元件中叫做 `cdk-tree` ( CDK 提供的元件是無樣式的版本)，這個元件可以用來顯示階層資料。今年的 ng-conf 2018 有一場專門講 Angular Material's Trees，有興趣可以看看[影片](https://www.youtube.com/watch?v=s0Vy3sLbeyA)或[簡報](https://docs.google.com/presentation/d/1DmWdfr8j25owK2ac5qlt7oeX6HpxQnXEGwmHIjf6EHI/edit)。除了 tree 元件外，還有 [badge](https://material.angular.io/components/badge/overview) 與 [bottom-sheet components](https://material.angular.io/components/bottom-sheet/overview) 元件也值得看看。 ## Angular CLI 工作區 (Workspaces) 全新的 Angular CLI v6 加入了 Workspaces 概念，可以讓你 **ng new** 一次，卻可以開發多個 Angular 專案，所有專案共用一個開發環境。也因此原本的 .angular-cli.json 現在會改為 angular.json 定義檔。要升級到新的定義檔，只要輸入 **ng update @angular/cli** 就會自動轉換過去。(佛心來著) 想學習更多關於 angular.json 設定檔的結構，可以參考 [Learn more about the new configuration file](https://github.com/angular/angular-cli/wiki/angular-workspace) 文章。 ## Angular 函式庫支援 (Library Support) 現在透過 **ng generate library ** 就可以產生 Angular 共用函式庫，所有 Module, Component, Service 與獨立的 package.json 都會全自動寫好，骨架全部都會架好給你，你只要專心開發元件即可！到時你可以將自訂 Angular 函式庫封裝成一個 npm 套件，並且在多個專案中分享，啥都不用重新學，實在太銷魂啦！ XD 想學習如何自行建立 Angular 函式庫，可以參考 [Learn more about creating libraries with the Angular CLI](https://github.com/angular/angular-cli/wiki/stories-create-library) 文章。 ## Tree Shakable Providers 為了讓 Angular 最終部署的檔案更小，全新的 Tree Shakable Providers 架構，可以讓你的 Angular Services 變得可以透過 Tree-shaking 自動濾除沒用到旦註冊進 Module 的服務元件。要做到這點，你的服務元件注入的方式會有所改變 ( 原本的注入方式一樣可以用 )。 以前我們注入服務元件的方式如下： [![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/75345214d4f35928a282-image_thumb_264.png)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/6fe802d35a63e4b4287a-image_3132.png) 現在，你不需要將服務註冊到 @NgModule 的 providers 了： [![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/a3f9d9e070c12ed35b73-image_thumb_265.png)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/1008416929b17c8d69a1-image_3133.png) 想學習新的 DI 注入方式，可以參考 [Read more about Dependency Injection](https://angular.io/guide/dependency-injection) 文章。 ## Animations 效能提升 Angular Animations 重新實作過，且效能大幅提升，也不需要額外載入 [web animations polyfill](https://angular.io/guide/browser-support#enabling-polyfills) 了。少了 [web animations polyfill](https://angular.io/guide/browser-support#enabling-polyfills) 這個 Polyfill 檔，大約可以省下 47KB 的 bundle 大小！同時在 Safari 瀏覽器的效能也大幅提升。 ## RxJS v6 Angular 6 開始，預設會採用 RxJS v6 版本，且透過 **ng update rxjs** 命令，就會自動幫你把專案內的 RxJS 寫法升級，最終產出的 bundle 檔案又會小一截，真正做到***無腦升級***，立即享用最新版本！ 如果你還想使用舊版的 RxJS 寫法，可以考慮安裝 rxjs-compat 套件，你的 RxJS 預設就會向後相容，舊的語法也可以支援。 想知道 RxJS 升級過程的技術細節，可以參考 [learn more about the 5.5 to 6.0 migration](https://github.com/ReactiveX/rxjs/blob/6.6.7/MIGRATION.md) 文章。 ## 延長支援時間 (Long Term Support) (LTS) 從 Angular v4 開始，每個主要版本的官方支援時間會加長。以後新的主要版本推出，會有 6 個月的主力支援，之後會有 12 個月重要問題修復 (critical bugfixes and security patches)，總共 18 個月的技術支援期，讓大家能夠跟上版本更新的進度。 各位不要笑，在前端 18 個月，大概等同於後端 5 年的變化。所以 18 個月已經很長了！ 在 Angular CLI 的幫助下，升級並不是難事，我強烈建議大家隨時將手邊 Angular 專案升級到最新版本！ 詳細資訊請見 [Angular versions and releases](https://angular.io/guide/releases) 文章。 ## 如何更新到 6.0.0 版 以前的 Angular Update Guide 已經有了正式的網址，名為 [update.angular.io](https://update.angular.io/)，所有 Angular 升級過程的注意事項都整理在這裡了。 基本上，要升級手邊專案到最新版，只需要三個步驟： 1. 更新 @angular/cli - **npm install -g @angular/cli** - **npm install @angular/cli** - **ng update @angular/cli** 3. 更新 Angular 相關套件版本 - **ng update @angular/core** - **ng update @angular/material** 5. 更新其他相依套件版本 - **ng update rxjs** ## 說好的 Ivy 呢？ Angular 6 原本想在正式版之前推出全新的 [Ivy](https://youtu.be/dIxknqPOWms?t=1360) 引擎，不過實在來不及，目前還在積極發展當中。 目前可以知道的是，當你現有的 Angular 應用程式採用 Ivy 引擎，現有的程式什麼都不用改，不過整個 Angular 應用程式的 Bundle 大小會大幅降低。是有多低呢？以一個 Hello World 的應用程式來看，採用現有的 Render Engine 會產生 **36 KB** 的 bundle 檔案，但採用 Ivy Render Engine 所產生的 Bundle 只有 **2.7 KB** 而已！！！ [![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/bd84621f447eef247621-30739475_10216353004488025_7808578288787390464_n_thumb.jpg)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/eef12232ed84df2b1787-30739475_10216353004488025_7808578288787390464_n.jpg) 你可以透過 [Is Angular Ivy Ready](https://is-angular-ivy-ready.firebaseapp.com/#/status "https://is-angular-ivy-ready.firebaseapp.com/#/status") 追蹤 Ivy 的發展進度。 ## 結語 Angular 官方團隊選擇在 5/4 的今天發布新版，其實是精挑細選的，因為今天正好也是知名的 [Star Wars Day](https://en.wikipedia.org/wiki/Star_Wars_Day) ( [星際大戰日](https://zh.wikipedia.org/wiki/星際大戰日) )！ 最後我想跟大家說一句：「願[原力](https://zh.wikipedia.org/wiki/%E5%8E%9F%E5%8A%9B)與你同在」（May the Force be with you） ## 相關連結 - [Version 6 of Angular Now Available – Angular Blog](https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4) - [Upgrading an Application to Angular 6: Step By Step – Code with Dan Blog](https://blog.codewithdan.com/upgrading-an-application-to-angular-6-step-by-step/) - [Angular 6.0.0 Change Log](https://github.com/angular/angular/blob/master/CHANGELOG.md#600-2018-05-03) - [StackBlitz 的 Angular 範本已經升級到 6.0.0](https://stackblitz.com/fork/angular) - [@angular/core - npm](https://www.npmjs.com/package/@angular/core)