2020年3月4日 星期三

angular-快速版本更新

簡介

有時候專案版本更新,如果跨太多版本號,
可能會有一些莫名的問題無法成功更新專案。
而且有些錯誤訊息看不懂到底錯在哪
這時使用以下方更快。
不過以下方式是否比較快則不一定適用每個人
至少我自己這樣更新是比較快的XD。

1.更新 CLI 工具

如果電腦裡面沒有其他專案,就直接更新 CLI 工具吧。
CLI 工具更新,可在 cmd 下輸入以下
請注意,如果電腦裡還有其他專案,則不建議直接更新 CLI 工具。

    npm install -g @angular-devkit/schematics-cli

2.建立一個新專案

先 new 一個專案。
請注意,如果沒有執行 1 ,在 new 完專案後,應該執行 ng update,
並根據建議更新指令(如下方所示) 逐一執行。確保得到一個官方最新版本專案。

    Name                      Version                  Command to update
    --------------------------------------------------------------------------------
    @angular/cli              8.3.5 -> 8.3.6           ng update @angular/cli
    @angular/core             8.2.7 -> 8.2.8           ng update @angular/core
    rxjs                      6.4.0 -> 6.5.3           ng update rxjs

3.將舊專案資料搬移到新專案--模組

將所有src/app裡面的資料夾模組先丟到新專案裡,執行 ng serve 跑跑看
不包含以下
  1. app.component.html
  2. app.component.scss
  3. app.component.spec.ts
  4. app.component.ts
  5. app.module.ts
  6. app-routing.module.ts
如果有問題可以先執行 npm audit fix 或根據出現的訊息修正檔案。

4.將舊專案 plugin 照著讓新專案安裝

如果OK的話,依照舊專案裡的 package.json 安裝(npm install) 各 plugin 元件的最新版本。
再試著跑 ng serve

4.將舊專案 plugin 照著讓新專案安裝

再把除了 package.json,package-lock.json 的檔案都複製過去覆蓋。
大致為以下檔案
  1. app.component.html
  2. app.component.scss
  3. app.component.spec.ts
  4. app.component.ts
  5. app.module.ts
  6. app-routing.module.ts

5.修復與開啟

繼續試著跑 ng serve,再看情形執行 npm audit fix 。

6.完成

通常這樣之後如果有錯誤,提示資訊就比較容易看懂哪裡有問題了。
我通常最後沒辦法時候就都這種方式更新都能成功。

沒有留言:

張貼留言