Angular 從 5 升級到 6

Angular
  1. 1. Angualr Update Guide
  2. 2. Rxjs 5 到 6
  3. 3. Angular Framework
  4. 4. Angular Material
  5. 5. Angular Cli
  6. 6. 參考資料

2018-05-03，Angular 已經更新到 6.0.0 摟，別急著更新，可能會爆掉的，像是 rxjs 也跟著更新了

（持續更新中文章…，因為我自己也還沒更新

Angualr Update Guide

angular 建立了一個網站，透過指定版本，就可以告訴你應該怎麼升級你的 Angular 專案

如何更新 Angular 的教學網站

Rxjs 5 到 6

請先看此文章的介紹，日後會有一篇文章的整理

Fix your RxJS 6 Imports & Operators - What’s New in RxJS 6?

主要就是 import 的方式改變

還有增加 pipe 的用法，過去都是 Observable.map() 現在要改成 Observable.pipe(map())，多了一個 pipe，將過去的 operator 都寫在 pipe 內

Angular Framework

Angular Material

因為我自己已經先使用 Primeface，功能上並沒有太大的差異，差異比較大的應該是 UI 的部分而已。

如果是剛開始接觸 Angular，可以自行選擇適合自己的 UI 風格

Angular Cli

  • 暫時停用 ng eject

因為不相容新的 angular setting json file (angular-cli.json 換成 angular.json)

eject 功能我也從來沒用過，如果要使用，可以使用 @angular/cli@1.7.4

  • 增加 ng update

用來更新 angular 專案下 npm 管理的套件，不用再自己輸入一長串 npm install 指令

使用說明可參照 官方說明

  • 增加 ng add

我到目前也沒用過，說明就是增加套件到你的 angular 專案，應該僅限於增加 angular 的套件，如：@angular/pwa

  • 增加支援 PWA (Progressive Web App )

Progressive Web App 介紹 - 你的首個 Progressive Web App

  • 取代 angular-cli.json

angular.json 取代 angular-cli.json 成為新的 angular 專案的設定檔

angular.json 架構可參考 官方說明

  • 編譯及建置的優化

Webpakc 更新到 4

  • 在一個 Angular 專案支援多個應用

我不知道跟一個資料夾下有多個 angular app 有什麼差異

增加 app 的指令

1
ng generate application my-other-app

運行指定 app 的指令

1
ng serve my-other-app
  • 支援開發自己的函式庫
1
ng generate library my-lib

該函式庫會包含 component 和 service 各一個

PS. 我另外有做一個像是 typescript Date 物件的擴充 Github - typescript extension

  • Schematic Defaults 預設的設定

在 angular.json 的設定，可以是 root（全域） 設定，也可以根據 project 設定

另外也可以在 /.angular-config.json 檔案設定

  • Smart Defaults 智能預設

我在想是不是在執行 command line 指令時，通常都會透過 –args 這樣傳遞參數，透過 smart defaults

  • Breaking changes

沒有用過

參考資料

Version 6 of Angular Now Available

Angular Framework Change Log

Angular Material Change Log

Angular Cli Change Log

migration