[蓋大樓] Angular 6 Upgrade 問題回報區


#1

Angular 6 於昨日正式釋出,我相信很多人都有試著將手邊的專案升級到 6 版,雖然官方提供了升級的指令及步驟,但事情總不可能那麼順利,歡迎大家把自己遇到的問題及解法,分享在此篇討論內,以造福其他人,減少彼此撞牆的時間


#2

我直接在Angular CLI的package.json把相關版號改一改之後重新npm install
目前跑起來都還正常,
只是不知道這樣作法是否正規?


#3

升級以後執行 ng newng update都會出現錯誤

error: unknown option `–silent’

實際上ng new是成功,可以先執行npm install後再跑ng serve
ng update還是fail…需要看看有沒有其他回應了

可以參考這篇


#4

我照著保哥的文章升級


但 angular-cli 一直卡在 1.7.4 版本
因此後來直接修改 package.json 內的版本, 再 npm i 之後就成功升級了
繼續照著文章的步驟走,發現 ng update --all 的時候,
報了很多相依套件版本不符合的問題,或是找不到某個套件
因此又手動修改 package.json 中該套件的版本,或是直接 npm i 該套件
就這樣重複好幾次,直到 ng update --all 正常更新

目前在本機端打開專案有遇到幾個問題
ㄧ、 編譯 css 問題 (我使用 sass)
-webkit-box-orient 這個屬性無法成功編譯,但也不會報錯,在開發者工具看 css 時,會發現這個屬性直接蒸發不見
要在前後加上
/* autoprefixer: off /
-webkit-box-orient: vertical
/
autoprefixer: on */
才能正確顯示
二、 typescript 版本
ng update --all 完成之後,我的 typescript 版本好像是 2.8.3
但我在執行 npm start 時,他要求我的 typescript 版本要介於 2.7 ~ 2.8.0之間
因此要重新安裝版本是 2.7 ~ 2.8.0之間的 typescript


#5

首先我更新了 @angular/cli

全域:yarn global upgrade @angular/cli@latest
專案目錄:yarn upgrade @angular/cli@latest

接著輸入 ng update 進行檢查:
image

根據分析結果先來升級 @angular/core

ng update @angular/core

然後就等了快五分鐘…
看來大部分升級第一個會遇到的問題應該都是 typescript,畢竟不是時常會去動這個。


or

檢查 typescript 版本:

$ tsc -v

升級 typescript:

yarn upgrade typescript@2.7

輸入 angular cli 的升級指令進行確認:

ng update

再輸入一次 ng update
image

Good work!

接著最重要的 ng serve 死掉了:

原來 .angular-cli.json 還活著,這一版的設定檔名稱已經改成 angular.json
所以要升級的話,輸入:

ng update @angular/cli

再來一次!!

localhost:4200 也確認無誤正常執行,以上。


#6

ng update @angular/cli
Your global Angular CLI version (6.0.0) is greater than your local
version (1.5.0). The local Angular CLI version is used.

To disable this warning use “ng config -g cli.warnings.versionMismatch false”.
(node:13856) ExperimentalWarning: The fs.promises API is experimental
The specified command update is invalid. For available options, see ng help.

=================
想請問一下,我試著做ng update,但卻無法
請問該怎麼解決這個問題呢?
謝謝


#7

這只是提示你的 local 仍然是 1.5,
所以需要做一下 npm install @angular/cli@latest 安裝最新版的 cli 在 local,
更新之後再做 ng update 才有效果。


#8

最近更新了兩個專案從4~6, 產生非常多相依的問題, 最後的結論是 @angular/core 放棄使用 ng update 來更新, 整個步驟大致如下

  1. 使用 npm 或 yarn 更新 @angular/core 及相關套件

    npm install @angular/cli@^6.0.1 @angular/animations@^6.0.1 @angular/common@^6.0.1 @angular/compiler@^6.0.1 @angular/compiler-cli@^6.0.1 @angular/core@^6.0.1 @angular/forms@^6.0.1 @angular/http@^6.0.1 @angular/platform-browser@^6.0.1 @angular/platform-browser-dynamic@^6.0.1 @angular/platform-server@^6.0.1 @angular/router@^6.0.1 typescript@2.7.2

6.0.1 可以換成當下最新版

  1. 更新 Angular 專案架構

ng update @angular/cli

這步驟只要專案下 angular/cli 版本有更新, 基本上會失敗

  1. 更新 RxJS

    ng update rxjs

若失敗, 加上 --force

npm install rxjs --force

如果還是失敗, 直接用 npm 或 yarn 安裝

npm install rxjs@6.1.0 rxjs-compat@^6.0.0-rc.0

3.1 處理 RxJS 的 breaking changes

npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p tsconfig.json
  1. 更新 Angular Material

    ng update @angular/material

一樣, 失敗就加上 --force, 再不行就手動裝套件…

5 到 6 基本上都沒問題

2 到 6 的話…套件會裝, 但殘念的是 breaking changes 不會修 md -> mat Orz

  1. 確保程式正確

接下來才是重點, 直接完整的編譯看看

ng build --prod --aot

這樣可以確保程式和樣板都沒有錯誤, 有錯誤再逐步調整

如果前面 ng update 都順利的話, 這裡問題就不會太多, 但越大越複雜的專案, 這裡就很痛苦了

(修 Angular Material 2 到 6, 真的會很抓狂)