###### tags: `Angular` # 附錄: 如何正確將 Angular-CLI 更新至最新版 - 更新會分為全域(Global) 以及本地(Project) - 首先，先更新 **全域(Global)** 的 CLI ```shell= npm uninstall -g @angular/cli npm install -g @angular/cli@latest ``` ![](https://i.imgur.com/QZIDZDu.jpg) - 加上 **-g** 代表的是 global - 先刪再重裝才比較不會造成衝突 - 確認 CLI 版本真的是最新的 ```shell= ng --version ``` ![](https://i.imgur.com/c13vehg.jpg) - 可以看到筆者的 **global** CLI 已經更新到最新版的 **12.03** 了，但 **Project** 的仍然停留在 **1.3.2** - 此時視情況更新，以筆者的強迫症，肯定是要更新一下的，不過更新通常伴隨著向下兼容或是使用到的 Component 已經 Deprecated 的問題 - 不論如何，先試看看吧！本地的更新流程如下: - 記得先切到專案目錄下再執行以下指令: ```shell= ng update ``` ![](https://i.imgur.com/4nCprsi.png) - 如上圖，該指令會分析有什麼套件該更新了，以此例是 @angular/core 與 @angular/cli - 所以就先來更新 @angular/cli 試試 ```shell= ng update @angular/cli --force ``` ![](https://i.imgur.com/k2aoJgy.jpg) - 怎麼回事？為什麼會跳這樣的訊息？ - 請先執行 **npm install** 確定在專案目錄下的 node_modules 裡有東西再說(node_modules 是根據 package.json 中所列的相依套件去下載安裝的目錄檔案) - 好…執行 npm install 完再 ng update ![](https://i.imgur.com/nMcWBK2.png) - 又怎麼了？ 原來 npm install 後會造成目錄下的一些檔案異動 - 沒關係，我們先 git stash，將異動藏起來(這邊還是建議用 git add + git commit 之後比較不會遇到無法回溯的問題) - OK，git stash 再 ng update ![](https://i.imgur.com/LNVzKrR.jpg) - 嗯…還有問題？ 喔…大版號差太多了，建議先升到 6 - 會這麼建議是因為 6 開始 .angular-cli.json 被移除，換成 angular.json - 那就…先更新到 6 吧 ```shell= ng update @angular/cli@6 --force ``` ![](https://i.imgur.com/38Kl5Vv.jpg) - 這裡的重點就是 angular.json 被建出來了 - 看到 **Migration complete** 就心情愉快 - 不過 6 不是我們的終點，所以再跑一次 ```shell= ng update @angular/cli --force ``` - 執行之後會再收到提示要分別先升到 7, 8, 9 - 依序升級完之後再執行上方指令最後一次 - 此外，因為有用到古早時代的 ng-bootstrap 所以還要移除再安裝 - 根據筆者撞牆約 4 小時候整理所有的指令與輸出如下，請自行斟酌需要的部份(不見得你也是從 Angular 5 開始升): **指令** ```shell= npm install ng update git add . git commit -m "First Commit" ng update @angular/cli@6 --force git add . git commit -m "Upgrade to Angular 6" ng update @angular/cli@7 --force git add . git commit -m "Upgrade to Angular 7" ng update @angular/cli@8 --force git add . git commit -m "Upgrade to Angular 8" ng update @angular/cli@9 --force git add . git commit -m "Upgrade to Angular 9" ng update @angular/cli@11 --force npm uninstall @ng-bootstrap/ng-bootstrap ng add @ng-bootstrap/ng-bootstrap ``` **指令含輸出** ```shell= gc@localhost ~/D/s/f/datacenter (master)> npm install added 957 packages, and audited 958 packages in 15s 166 vulnerabilities (43 low, 40 moderate, 73 high, 10 critical) To address all issues, run: npm audit fix Run `npm audit` for details. gc@localhost ~/D/s/f/datacenter (master)> ng update The installed local Angular CLI version is older than the latest stable version. Installing a temporary version to perform the update. Installing packages for tooling via npm. Installed packages for tooling via npm. Using package manager: 'npm' Collecting installed dependencies... Found 35 dependencies. We analyzed your package.json, there are some packages to update: Name Version Command to update -------------------------------------------------------------------------------- @angular/cli 1.3.2 -> 12.0.3 ng update @angular/cli @angular/core 5.0.0-beta.6 -> 12.0.3 ng update @angular/core @angular/core 5.0.0-beta.6 -> 7.2.16 ng update @angular/core There might be additional packages which don't provide 'ng update' capabilities that are outdated. You can update the additional packages by running the update command of your package manager. gc@localhost ~/D/s/f/datacenter (master)> git add . gc@localhost ~/D/s/f/datacenter (master)> git commit -m "First commit" [master 3a25e2f] First commit 1 file changed, 11913 insertions(+), 162 deletions(-) gc@localhost ~/D/s/f/datacenter (master)> ng update @angular/cli@6 --force The installed local Angular CLI version is older than the latest stable version. Installing a temporary version to perform the update. Installing packages for tooling via npm. Installed packages for tooling via npm. Using package manager: 'npm' Collecting installed dependencies... Found 35 dependencies. Fetching dependency metadata from registry... Updating package.json with dependency @angular/cli @ "6.2.9" (was "1.3.2")... UPDATE package.json (1519 bytes) (node:51113) [DEP0147] DeprecationWarning: In future versions of Node.js, fs.rmdir(path, { recursive: true }) will be removed. Use fs.rm(path, { recursive: true }) instead (Use `node --trace-deprecation ...` to show where the warning was created) ✔ Packages successfully installed. ** Executing migrations of package '@angular/cli' ** ❯ Update an Angular CLI project to version 6. Updating karma configuration Updating configuration Removing old config file (.angular-cli.json) Writing config file (angular.json) Some configuration options have been changed, please make sure to update any npm scripts which you may have modified. DELETE .angular-cli.json CREATE angular.json (3747 bytes) UPDATE karma.conf.js (962 bytes) UPDATE src/tsconfig.spec.json (324 bytes) UPDATE package.json (1566 bytes) UPDATE tsconfig.json (407 bytes) UPDATE tslint.json (3026 bytes) ✔ Packages installed successfully. Migration completed. gc@localhost ~/D/s/f/datacenter (master)> git add . gc@localhost ~/D/s/f/datacenter (master)> git commit -m "Upgrade to Angular 6" [master dcaaec9] Upgrade to Angular 6 8 files changed, 26501 insertions(+), 12797 deletions(-) delete mode 100644 .angular-cli.json create mode 100644 angular.json gc@localhost ~/D/s/f/datacenter (master)> ng update @angular/cli@7 --force The installed local Angular CLI version is older than the latest stable version. Installing a temporary version to perform the update. Installing packages for tooling via npm. Installed packages for tooling via npm. Using package manager: 'npm' Collecting installed dependencies... Found 36 dependencies. Fetching dependency metadata from registry... Updating package.json with dependency @angular/cli @ "7.3.10" (was "6.2.9")... UPDATE package.json (1567 bytes) (node:51743) [DEP0147] DeprecationWarning: In future versions of Node.js, fs.rmdir(path, { recursive: true }) will be removed. Use fs.rm(path, { recursive: true }) instead (Use `node --trace-deprecation ...` to show where the warning was created) ✔ Packages successfully installed. ** Executing migrations of package '@angular/cli' ** ❯ Update an Angular CLI project to version 7. UPDATE package.json (1568 bytes) ✔ Packages installed successfully. Migration completed. ❯ Update an Angular CLI project to version 7. UPDATE src/polyfills.ts (2450 bytes) Migration completed. ❯ Update an Angular CLI project to version 7. Migration completed. ❯ Update an Angular CLI project to version 7. Migration completed. ❯ Update an Angular CLI project to version 7. UPDATE tsconfig.json (434 bytes) UPDATE package.json (1591 bytes) ✔ Packages installed successfully. Migration completed. gc@localhost ~/D/s/f/datacenter (master)> git add . gc@localhost ~/D/s/f/datacenter (master)> git commit -m "Upgrade to Angular 7" [master ca1b7e4] Upgrade to Angular 7 4 files changed, 4335 insertions(+), 4804 deletions(-) gc@localhost ~/D/s/f/datacenter (master)> ng update @angular/cli@8 --force The installed local Angular CLI version is older than the latest stable version. Installing a temporary version to perform the update. Installing packages for tooling via npm. Installed packages for tooling via npm. Using package manager: 'npm' Collecting installed dependencies... Found 37 dependencies. Fetching dependency metadata from registry... Package "@ng-bootstrap/ng-bootstrap" has an incompatible peer dependency to "@angular/common" (requires "^4.0.3" (extended), would install "8.2.14"). Package "@angular/http" has an incompatible peer dependency to "@angular/core" (requires "5.0.0-beta.6" (extended), would install "8.2.14"). Package "@ng-bootstrap/ng-bootstrap" has an incompatible peer dependency to "@angular/forms" (requires "^4.0.3" (extended), would install "8.2.14"). Package "@angular/http" has an incompatible peer dependency to "@angular/platform-browser" (requires "5.0.0-beta.6" (extended), would install "8.2.14"). Package "@angular/http" has an incompatible peer dependency to "rxjs" (requires "^5.0.1", would install "6.6.7"). Updating package.json with dependency @angular-devkit/build-angular @ "0.803.29" (was "0.13.10")... Updating package.json with dependency @angular/cli @ "8.3.29" (was "7.3.10")... Updating package.json with dependency @angular/compiler-cli @ "8.2.14" (was "5.0.0-beta.6")... Updating package.json with dependency @angular/language-service @ "8.2.14" (was "4.3.6")... Updating package.json with dependency typescript @ "3.5.3" (was "2.3.4")... Updating package.json with dependency @angular/animations @ "8.2.14" (was "5.0.0-beta.6")... Updating package.json with dependency @angular/common @ "8.2.14" (was "5.0.0-beta.6")... Updating package.json with dependency @angular/compiler @ "8.2.14" (was "5.0.0-beta.6")... Updating package.json with dependency @angular/core @ "8.2.14" (was "5.0.0-beta.6")... Updating package.json with dependency @angular/forms @ "8.2.14" (was "5.0.0-beta.6")... Updating package.json with dependency @angular/platform-browser @ "8.2.14" (was "5.0.0-beta.6")... Updating package.json with dependency @angular/platform-browser-dynamic @ "8.2.14" (was "5.0.0-beta.6")... Updating package.json with dependency @angular/router @ "8.2.14" (was "5.0.0-beta.6")... Updating package.json with dependency rxjs @ "6.6.7" (was "5.4.3")... Updating package.json with dependency zone.js @ "0.9.1" (was "0.8.17")... UPDATE package.json (1539 bytes) (node:57277) [DEP0147] DeprecationWarning: In future versions of Node.js, fs.rmdir(path, { recursive: true }) will be removed. Use fs.rm(path, { recursive: true }) instead (Use `node --trace-deprecation ...` to show where the warning was created) ✔ Packages successfully installed. ** Executing migrations of package '@angular/cli' ** ❯ Update an Angular CLI project to version 8. CREATE browserslist (429 bytes) UPDATE tslint.json (3021 bytes) UPDATE package.json (1501 bytes) UPDATE tsconfig.json (469 bytes) UPDATE src/tsconfig.app.json (187 bytes) UPDATE src/tsconfig.spec.json (277 bytes) ✔ Packages installed successfully. Migration completed. ❯ Update an Angular CLI project to version 8. Migration completed. ** Executing migrations of package '@angular/core' ** ❯ Migrates DOCUMENT Injection token from platform-browser imports to common import. Migration completed. ❯ Migrates ViewChild and ContentChild to explicit query timing. ------ Static Query Migration ------ With Angular version 8, developers need to explicitly specify the timing of ViewChild and ContentChild queries. Read more about this here: https://v8.angular.io/guide/static-query-migration ------------------------------------------------ UPDATE src/app/app.component.ts (1218 bytes) Migration completed. ❯ Warns developers if values are assigned to template variables. Migration completed. ** Executing migrations of package 'rxjs' ** ❯ Adds rxjs-compat package to the project to ensure compatability with RxJS 5. UPDATE package.json (1535 bytes) ⠴ Installing packages (npm)...npm WARN using --force Recommended protections disabled. ⠴ Installing packages (npm)...⸨ ⸩ ⠧ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠦ Installing packages (npm)...⸨ ⸩ ⠴ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠧ Installing packages (npm)...⸨ ⸩ ⠦ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠇ Installing packages (npm)...⸨ ⸩ ⠼ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠏ Installing packages (npm)...⸨ ⸩ ⠸ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠋ Installing packages (npm)...⸨ ⸩ ⠇ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠙ Installing packages (npm)...⸨ ⸩ ⠼ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠹ Installing packages (npm)...⸨ ⸩ ⠸ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠸ Installing packages (npm)...⸨ ⸩ ⠇ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠼ Installing packages (npm)...⸨ ⸩ ⠧ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠴ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠦ Installing packages (npm)...⸨ ⸩ ⠼ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠧ Installing packages (npm)...⸨ ⸩ ⠦ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠇ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠏ Installing packages (npm)...⸨ ⸩ ⠸ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠋ Installing packages (npm)...⸨ ⸩ ⠋ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠙ Installing packages (npm)...⸨ ⸩ ⠏ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠹ Installing packages (npm)...⸨ ⸩ ⠋ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠸ Installing packages (npm)...⸨ ⸩ ⠋ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠼ Installing packages (npm)...⸨ ⸩ ⠼ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠴ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠦ Installing packages (npm)...⸨ ⸩ ⠼ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠧ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠇ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠏ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠋ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠙ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠹ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠸ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠼ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠴ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠦ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠧ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠇ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠏ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠋ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠙ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠹ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠸ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠼ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠴ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠦ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠧ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠇ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠏ Installing packages (npm)...⸨ ⸩ ⠙ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠋ Installing packages (npm)...⸨ ⸩ ⠧ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠙ Installing packages (npm)...⸨ ⸩ ⠧ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠴ Installing packages (npm)...⸨ ⸩ ⠇ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV⠦ Installing packages (npm)...⸨ ⸩ ⠏ reify:rxjs-compat: timing metavuln:cache:get:security-advisory:tslint:EYpun+2HJycrV added 1 package, and audited 1733 packages in 8s 61 packages are looking for funding run `npm fund` for details ⠧ Installing packages (npm)... 93 vulnerabilities (25 low, 28 moderate, 36 high, 4 critical) To address issues that do not require attention, run: npm audit fix To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. ✔ Packages installed successfully. Migration completed. gc@localhost ~/D/s/f/datacenter (master)> git add . gc@localhost ~/D/s/f/datacenter (master)> git commit -m "Upgrade to Angular 8" [master 9aa1770] Upgrade to Angular 8 8 files changed, 10049 insertions(+), 7384 deletions(-) create mode 100644 browserslist gc@localhost ~/D/s/f/datacenter (master)> ng update @angular/cli@9 --force The installed local Angular CLI version is older than the latest stable version. Installing a temporary version to perform the update. Installing packages for tooling via npm. Installed packages for tooling via npm. Using package manager: 'npm' Collecting installed dependencies... Found 37 dependencies. Fetching dependency metadata from registry... Package "@ng-bootstrap/ng-bootstrap" has an incompatible peer dependency to "@angular/common" (requires "^4.0.3" (extended), would install "9.1.13"). Package "@ng-bootstrap/ng-bootstrap" has an incompatible peer dependency to "@angular/core" (requires "^4.0.3" (extended), would install "9.1.13"). Package "@ng-bootstrap/ng-bootstrap" has an incompatible peer dependency to "@angular/forms" (requires "^4.0.3" (extended), would install "9.1.13"). Updating package.json with dependency @angular-devkit/build-angular @ "0.901.15" (was "0.803.29")... Updating package.json with dependency @angular/cli @ "9.1.15" (was "8.3.29")... Updating package.json with dependency @angular/compiler-cli @ "9.1.13" (was "8.2.14")... Updating package.json with dependency @angular/language-service @ "9.1.13" (was "8.2.14")... Updating package.json with dependency typescript @ "3.8.3" (was "3.5.3")... Updating package.json with dependency @angular/animations @ "9.1.13" (was "8.2.14")... Updating package.json with dependency @angular/common @ "9.1.13" (was "8.2.14")... Updating package.json with dependency @angular/compiler @ "9.1.13" (was "8.2.14")... Updating package.json with dependency @angular/core @ "9.1.13" (was "8.2.14")... Updating package.json with dependency @angular/forms @ "9.1.13" (was "8.2.14")... Updating package.json with dependency @angular/platform-browser @ "9.1.13" (was "8.2.14")... Updating package.json with dependency @angular/platform-browser-dynamic @ "9.1.13" (was "8.2.14")... Updating package.json with dependency @angular/router @ "9.1.13" (was "8.2.14")... Updating package.json with dependency zone.js @ "0.10.3" (was "0.9.1")... UPDATE package.json (1536 bytes) (node:58602) [DEP0147] DeprecationWarning: In future versions of Node.js, fs.rmdir(path, { recursive: true }) will be removed. Use fs.rm(path, { recursive: true }) instead (Use `node --trace-deprecation ...` to show where the warning was created) ✔ Packages successfully installed. ** Executing migrations of package '@angular/cli' ** ❯ Angular Workspace migration. Update an Angular CLI workspace to version 9. UPDATE angular.json (3941 bytes) UPDATE src/tsconfig.app.json (225 bytes) UPDATE package.json (1538 bytes) ✔ Packages installed successfully. Migration completed. ❯ Lazy loading syntax migration. Update lazy loading syntax to use dynamic imports. Migration completed. ❯ Replace deprecated 'styleext' and 'spec' Angular schematic options. UPDATE angular.json (3938 bytes) Migration completed. ** Executing migrations of package '@angular/core' ** ❯ Static flag migration. Removes the `static` flag from dynamic queries. As of Angular 9, the "static" flag defaults to false and is no longer required for your view and content queries. Read more about this here: https://v9.angular.io/guide/migration-dynamic-flag Migration completed. ❯ Missing @Injectable and incomplete provider definition migration. In Angular 9, enforcement of @Injectable decorators for DI is a bit stricter and incomplete provider definitions behave differently. Read more about this here: https://v9.angular.io/guide/migration-injectable Migration completed. ❯ ModuleWithProviders migration. In Angular 9, the ModuleWithProviders type without a generic has been deprecated. This migration adds the generic where it is missing. Read more about this here: https://v9.angular.io/guide/migration-module-with-providers Migration completed. ❯ Renderer to Renderer2 migration. As of Angular 9, the Renderer class is no longer available. Renderer2 should be used instead. Read more about this here: https://v9.angular.io/guide/migration-renderer Migration completed. ❯ Undecorated classes with decorated fields migration. As of Angular 9, it is no longer supported to have Angular field decorators on a class that does not have an Angular decorator. Read more about this here: https://v9.angular.io/guide/migration-undecorated-classes Migration completed. ❯ Undecorated classes with DI migration. As of Angular 9, it is no longer supported to use Angular DI on a class that does not have an Angular decorator. Read more about this here: https://v9.angular.io/guide/migration-undecorated-classes Migration completed. Your project has been updated to Angular version 9! For more info, please see: https://v9.angular.io/guide/updating-to-version-9 gc@localhost ~/D/s/f/datacenter (master)> git add . gc@localhost ~/D/s/f/datacenter (master)> git commit -m "Upgrade to Angular 9" [master 4549fde] Upgrade to Angular 9 4 files changed, 6405 insertions(+), 3198 deletions(-) gc@localhost ~/D/s/f/datacenter (master)> ng update @angular/cli@11 --force The installed local Angular CLI version is older than the latest stable version. Installing a temporary version to perform the update. Installing packages for tooling via npm. Installed packages for tooling via npm. Using package manager: 'npm' Collecting installed dependencies... Found 37 dependencies. Fetching dependency metadata from registry... Package "@ng-bootstrap/ng-bootstrap" has an incompatible peer dependency to "@angular/common" (requires "^4.0.3" (extended), would install "11.2.14"). Package "@ng-bootstrap/ng-bootstrap" has an incompatible peer dependency to "@angular/core" (requires "^4.0.3" (extended), would install "11.2.14"). Package "@ng-bootstrap/ng-bootstrap" has an incompatible peer dependency to "@angular/forms" (requires "^4.0.3" (extended), would install "11.2.14"). Updating package.json with dependency @angular-devkit/build-angular @ "0.1102.14" (was "0.901.15")... Updating package.json with dependency @angular/cli @ "11.2.14" (was "9.1.15")... Updating package.json with dependency @angular/compiler-cli @ "11.2.14" (was "9.1.13")... Updating package.json with dependency @angular/language-service @ "11.2.14" (was "9.1.13")... Updating package.json with dependency karma @ "6.3.3" (was "1.7.1")... Updating package.json with dependency protractor @ "7.0.0" (was "5.1.2")... Updating package.json with dependency tslint @ "6.1.3" (was "5.3.2")... Updating package.json with dependency typescript @ "4.1.5" (was "3.8.3")... Updating package.json with dependency @angular/animations @ "11.2.14" (was "9.1.13")... Updating package.json with dependency @angular/common @ "11.2.14" (was "9.1.13")... Updating package.json with dependency @angular/compiler @ "11.2.14" (was "9.1.13")... Updating package.json with dependency @angular/core @ "11.2.14" (was "9.1.13")... Updating package.json with dependency @angular/forms @ "11.2.14" (was "9.1.13")... Updating package.json with dependency @angular/platform-browser @ "11.2.14" (was "9.1.13")... Updating package.json with dependency @angular/platform-browser-dynamic @ "11.2.14" (was "9.1.13")... Updating package.json with dependency @angular/router @ "11.2.14" (was "9.1.13")... UPDATE package.json (1550 bytes) (node:59313) [DEP0147] DeprecationWarning: In future versions of Node.js, fs.rmdir(path, { recursive: true }) will be removed. Use fs.rm(path, { recursive: true }) instead (Use `node --trace-deprecation ...` to show where the warning was created) ✔ Packages successfully installed. ** Executing migrations of package '@angular/cli' ** ❯ Update Browserslist configuration file name to '.browserslistrc' from deprecated 'browserslist'. RENAME browserslist => .browserslistrc Migration completed. ❯ Update tslint to version 6 and adjust rules to maintain existing behavior. tslint configuration does not extend "tslint:recommended" or it extends multiple configurations. Skipping rule changes as some rules might conflict. UPDATE package.json (1550 bytes) UPDATE tslint.json (2986 bytes) Migration completed. ❯ Remove deprecated 'es5BrowserSupport' browser builder option. The inclusion for ES5 polyfills will be determined from the browsers listed in the browserslist configuration. Migration completed. ❯ Replace deprecated and removed 'styleext' and 'spec' Angular schematic options with 'style' and 'skipTests', respectively. Migration completed. ❯ Remove deprecated options from 'angular.json' that are no longer present in v10. Migration completed. ❯ Add the tslint deprecation rule to tslint JSON configuration files. UPDATE tslint.json (3042 bytes) Migration completed. ❯ Update library projects to use tslib version 2 as a direct dependency. Read more about this here: https://v10.angular.io/guide/migration-update-libraries-tslib Migration completed. ❯ Update workspace dependencies to match a new v10 project. Package "rxjs-compat" found in the workspace package.json. This package typically was used during migration from RxJs version 5 to 6 during the Angular 5 timeframe and may no longer be needed. Read more about this: https://rxjs-dev.firebaseapp.com/guide/v6/migration UPDATE package.json (1549 bytes) ✔ Packages installed successfully. Migration completed. ❯ Update 'module' and 'target' TypeScript compiler options. Read more about this here: https://v10.angular.io/guide/migration-update-module-and-target-compiler-options UPDATE tsconfig.json (469 bytes) Migration completed. ❯ Removing "Solution Style" TypeScript configuration file support. Migration has already been executed. Migration completed. ❯ Replace deprecated library builder '@angular-devkit/build-ng-packagr'. Migration completed. ❯ Add 'declarationMap' compiler options for non production library builds. Migration completed. ❯ Remove deprecated options from 'angular.json' that are no longer present in v11. UPDATE angular.json (3904 bytes) Migration completed. ❯ Update workspace dependencies to match a new v11 project. UPDATE package.json (1548 bytes) ✔ Packages installed successfully. Migration completed. ** Executing migrations of package '@angular/core' ** ❯ Missing @Injectable and incomplete provider definition migration. As of Angular 9, enforcement of @Injectable decorators for DI is a bit stricter and incomplete provider definitions behave differently. Read more about this here: https://v9.angular.io/guide/migration-injectable Migration completed. ❯ ModuleWithProviders migration. As of Angular 10, the ModuleWithProviders type requires a generic. This migration adds the generic where it is missing. Read more about this here: https://v10.angular.io/guide/migration-module-with-providers Migration completed. ❯ Undecorated classes with Angular features migration. In version 10, classes that use Angular features and do not have an Angular decorator are no longer supported. Read more about this here: https://v10.angular.io/guide/migration-undecorated-classes Migration completed. ❯ In Angular version 11, the type of `AbstractControl.parent` can be `null` to reflect the runtime value more accurately. This migration automatically adds non-null assertions to existing accesses of the `parent` property on types like `FormControl`, `FormArray` and `FormGroup`. Migration completed. ❯ ViewEncapsulation.Native has been removed as of Angular version 11. This migration replaces any usages with ViewEncapsulation.ShadowDom. Migration completed. ❯ NavigationExtras omissions migration. In version 11, some unsupported properties were omitted from the `extras` parameter of the `Router.navigateByUrl` and `Router.createUrlTree` methods. Migration completed. ❯ Updates the `initialNavigation` property for `RouterModule.forRoot`. Migration completed. ❯ NavigationExtras.preserveQueryParams has been removed as of Angular version 11. This migration replaces any usages with the appropriate assignment of the queryParamsHandling key. Migration completed. ❯ The default value for `relativeLinkResolution` is changing from 'legacy' to 'corrected'. This migration updates `RouterModule` configurations that use the default value to now specifically use 'legacy' to prevent breakages when updating. Migration completed. ❯ `async` to `waitForAsync` migration. The `async` testing function has been renamed to `waitForAsync` to avoid confusion with the native `async` keyword. UPDATE src/app/app.component.spec.ts (1026 bytes) UPDATE src/app/alert/alert.component.spec.ts (769 bytes) UPDATE src/app/dashboard/dashboard.component.spec.ts (797 bytes) UPDATE src/app/metric/metric.component.spec.ts (776 bytes) UPDATE src/app/navbar/navbar.component.spec.ts (776 bytes) UPDATE src/app/nodes/nodes.component.spec.ts (769 bytes) UPDATE src/app/nodes-detail/nodes-detail.component.spec.ts (812 bytes) UPDATE src/app/nodes-row/nodes-row.component.spec.ts (791 bytes) Migration completed. ❯ Removes `canActivate` from a `Route` config when `redirectTo` is also present. Migration completed. gc@localhost ~/D/s/f/datacenter (master)> npm uninstall @ng-bootstrap/ng-bootstrap npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: 'karma-cli@1.0.1', npm WARN EBADENGINE required: { node: '0.10 || 0.12 || 4 || 5 || 6' }, npm WARN EBADENGINE current: { node: 'v16.3.0', npm: '7.15.1' } npm WARN EBADENGINE } removed 1 package, and audited 1568 packages in 4s 85 packages are looking for funding run `npm fund` for details 24 vulnerabilities (3 low, 10 moderate, 11 high) To address issues that do not require attention, run: npm audit fix To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. gc@localhost ~/D/s/f/datacenter (master)> ng add @ng-bootstrap/ng-bootstrap ℹ Using package manager: npm ✔ Found compatible package version: @ng-bootstrap/ng-bootstrap@9.1.2. ✔ Package information loaded. ✔ Package successfully installed. UPDATE package.json (1578 bytes) ✔ Packages installed successfully. UPDATE src/app/app.module.ts (1140 bytes) UPDATE src/polyfills.ts (2679 bytes) gc@localhost ~/D/s/f/datacenter (master)> ``` - 以上就是本地端的更新方式，很難想像如果沒有 CLI 會多令人抓狂 - 官方的[文件](https://update.angular.io/?l=3&v=5.0-12.0)有提供更新的方式，但…實測是沒什麼用，也許是我操作不當 - 上面會這麼複雜主要是因為版本太舊了，Angular 畢竟是經過了好幾次的大改版，所以相容性上要稍微注意一下 - 實際上只要 ng update，就可以知道有什麼套件要更新了 - 依 Angular 半年一大版的計劃來看，最好大家還是要知道一下本地端要怎麼更新，才不會無法開發喔 - Angular 幾次大改版的資訊可以參考人家整理好的[資料](https://tinyurl.com/3t75t7vf)