Angular 6 於昨日正式釋出，我相信很多人都有試著將手邊的專案升級到 6 版，雖然官方提供了升級的指令及步驟，但事情總不可能那麼順利，歡迎大家把自己遇到的問題及解法，分享在此篇討論內，以造福其他人，減少彼此撞牆的時間
1個讚
我直接在Angular CLI的package.json把相關版號改一改之後重新npm install
目前跑起來都還正常,
只是不知道這樣作法是否正規?
升級以後執行 ng new 和 ng update都會出現錯誤
error: unknown option `–silent’
實際上ng new是成功，可以先執行npm install後再跑ng serve
但ng update還是fail…需要看看有沒有其他回應了
可以參考這篇
我照著保哥的文章升級
https://blog.miniasp.com/post/2018/05/04/Angular-6-Released.aspx
但 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
首先我更新了 @angular/cli：
全域：yarn global upgrade @angular/cli@latest
專案目錄：yarn upgrade @angular/cli@latest
接著輸入 ng update 進行檢查：
根據分析結果先來升級 @angular/core：
ng update @angular/core
然後就等了快五分鐘…
看來大部分升級第一個會遇到的問題應該都是 typescript，畢竟不是時常會去動這個。
or
檢查 typescript 版本：
$ tsc -v
升級 typescript：
yarn upgrade typescript@2.7
輸入 angular cli 的升級指令進行確認：
ng update
再輸入一次 ng update：
Good work!
接著最重要的 ng serve 死掉了：
原來 .angular-cli.json 還活著，這一版的設定檔名稱已經改成 angular.json。
所以要升級的話，輸入：
ng update @angular/cli
再來一次！！
localhost:4200 也確認無誤正常執行，以上。
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,但卻無法
請問該怎麼解決這個問題呢?
謝謝
這只是提示你的 local 仍然是 1.5，
所以需要做一下 npm install @angular/cli@latest 安裝最新版的 cli 在 local，
更新之後再做 ng update 才有效果。
最近更新了兩個專案從4~6, 產生非常多相依的問題, 最後的結論是 @angular/core 放棄使用 ng update 來更新, 整個步驟大致如下
-
使用 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 可以換成當下最新版
- 更新 Angular 專案架構
ng update @angular/cli
這步驟只要專案下 angular/cli 版本有更新, 基本上會失敗
-
更新 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
-
更新 Angular Material
ng update @angular/material
一樣, 失敗就加上 --force, 再不行就手動裝套件…
5 到 6 基本上都沒問題
2 到 6 的話…套件會裝, 但殘念的是 breaking changes 不會修 md -> mat Orz
- 確保程式正確
接下來才是重點, 直接完整的編譯看看
ng build --prod --aot
這樣可以確保程式和樣板都沒有錯誤, 有錯誤再逐步調整
如果前面 ng update 都順利的話, 這裡問題就不會太多, 但越大越複雜的專案, 這裡就很痛苦了
(修 Angular Material 2 到 6, 真的會很抓狂)
1個讚