Upgrade Angular 7

隨著Angular 7的到來，最近也將手邊的專案都順利的升級到Angular 7，可說是無痛無雷呀~
不過還是有些地方是需要注意，就是在Angular 7開始不予許混用Template-Driven Form和Reactive Form，所以像下面這段程式碼是不能被編譯的。

<form [formGroup]="form">
    <input formControlName="Email" [(ngModel)]="value"> 
</form>

實際上這樣的混合的做法很糟也很難維護和測試，只會讓品質變差，所以Angular 7把這個卡掉是很正確的事(拍手)。

題外話，目前大部分的Angular 開發者也幾乎都是以Reactive Form為主來開發表單，最主要的原因是它比Template-Driven Form要來好維護和測試，特別是對於大表單與動態欄位，更是要採用Reactive Form，絕對會省下不少測試維護的時間。
可想而知Angular 7不予許混用Template-Driven Form和Reactive Form這件事，其實影響層面不大。

另外一項值得注意的事，Angular 7加入Budget Bundles的機制。簡單來說，當Bundle Size超過設定的門檻值就會觸發警告和錯誤，所以你會在angular.json看到下面這段設定。

   "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]

專案升級至Angular 7的方式:

1. 如果專案還是使用Rxjs 5，請安裝 "npm i -g rxjs-tslint"，並且執行"rxjs-5-to-6-migrate -p src/tsconfig.app.json"，將專案內的RxJs 5轉換成RxJs 6的語法。

2. 如果專案內有相依的套件是RxJS 6以前的版本的話，可以安裝rxjs-compat讓它向下相容。

"npm i rxjs-compat --save"。

3. 執行"ng update @angular/cli @angular/core"將專案升級至Angular 7。

備註:如果想一次更新專案內所有相依套件，可以安裝"npm install -g npm-check-updates"，
然後執行"ncu -a"更新package.json內的所有相依套件，最後執行"npm i"。

備註:本次Angular 7支援TypeScript 3.1、RxJS 6.3、Node.js 10，不妨也把這些東西，以及一些常用的全域套件一並更新吧!
"npm update -g npm npm-check-updates webpack @angular/cli typescript tslint rxjs-tslint"

參考文獻
1. https://update.angular.io/