ふるてつのぶろぐ

福岡在住のエンジニアです。

写真提供:福岡市

Angular13でWebアプリを作ろう - V13にバージョンアップ - ng update

今日すること

明けましておめでとうございます、ふるてつです。

今回は Angular のお話です。
昨年11月に Angular がバージョン 13 にあがりました。

今回のバージョンアップ作業はいつもより難しかったです。
というのも--forceオプションを使わないとバージョンを上げられませんでした。

新しいバージョンがリリースされた直後はよくあるのですが、
普通は1カ月くらい待つとオプションなしでバージョンアップできるようになります。
しかし今回は待っても変化がなく結局--forceオプションを使いました。
今回はその内容を書いてみようと思います。

1. 準備作業

バージョンアップ前にまずいまの環境に入っているライブラリを最新化します。
下のnodeのコマンドを実行します。
イメージとしてはpackage.jsonに定義してある範囲内でライブラリのマイナーバージョンを上げる感じです。

npm update

わたしの環境では多言語化ngx-translateやそのテスト用モジュールのngx-translate-testingなどを使っていて、それらが古いと警告がでてバージョンアップの邪魔になります。
そのために事前にあらかじめ最新化しておきます。
ただし上記のコマンドだと他のライブラリまで一気にマイナーバージョンがあがります。
そこはわたしは思い切って全部上げています。

2. アップデートコマンドの確認(ng update)

では次に Angular の CLIng updateコマンドを実行します。

ng update

すると下記のリストがでてきます。こちらが具体的なバージョンアップのコマンドです。
今回は cdk 、cli、core と material のほぼ全部のバージョンアップが必要です。
それとは別に、angular-eslint/schematics もバージョンアップします。

ng update
Using package manager: 'npm'
Collecting installed dependencies...
Found 51 dependencies.
    We analyzed your package.json, there are some packages to update:

      Name                                    Version                  Command to update      
     -------------------------------------------------------------------------------------    
      @angular-eslint/schematics              12.3.1 -> 13.0.1         ng update @angular-eslint/schematics
      @angular/cdk                            12.1.1 -> 13.1.2         ng update @angular/cdk
      @angular/cli                            12.1.1 -> 13.1.3         ng update @angular/cli
      @angular/core                           12.1.1 -> 13.1.2         ng update @angular/core
      @angular/material                       12.1.1 -> 13.1.2         ng update @angular/material

実際にバージョンアップするコマンドですが、上のリストの最後右端に書いてあります。

今回は上記のうちどのコマンドを実行しても失敗して--forceオプションを追加してコマンドを実行しなおせと表示されます。 ちなみに下が cdk のコマンドを流した時の警告です。

ng update @angular/cdk
Using package manager: 'npm'
Collecting installed dependencies...
Found 51 dependencies.
Fetching dependency metadata from registry...
                  Package "@angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires "~4.2.3 || ~4.3.2", would install "4.5.4").
                  Package "@angular/material" has an incompatible peer dependency to "@angular/cdk" (requires "12.1.1", would install "13.1.2").
                  Package "ngx-translate-testing" has an incompatible peer dependency to "@angular/common" (requires "^10.0.0-rc.0 || >=10.0.0 <12.0.0" (extended), would install "13.1.2").
                  Package "ngx-translate-testing" has an incompatible peer dependency to "@angular/core" (requires "^10.0.0-rc.0 || >=10.0.0 <12.0.0" (extended), would install "13.1.2").
× Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.

3. バージョンアップ実施

a. コマンドをつなげてアップデート

今回はどの順番でもうまくいかなかったので、すべてのコマンドをつなげて、
さらに--forceオプションもつけて一気にバージョンアップします。
結局コマンドは下記になります。

ng update @angular/core @angular/cli @angular/cdk @angular/material @angular-eslint/schematics --force

では実行します。

ng update @angular/core @angular/cli @angular/cdk @angular/material @angular-eslint/schematics --force
Using package manager: 'npm'
Collecting installed dependencies...
Found 51 dependencies.
Fetching dependency metadata from registry...
    Updating package.json with dependency @angular-devkit/build-angular @ "13.1.3" (was "12.1.1")...
    Updating package.json with dependency @angular-eslint/builder @ "13.0.1" (was "12.3.1")...
    Updating package.json with dependency @angular-eslint/eslint-plugin @ "13.0.1" (was "12.3.1")...
    Updating package.json with dependency @angular-eslint/eslint-plugin-template @ "13.0.1" (was "12.3.1")...    
    Updating package.json with dependency @angular-eslint/schematics @ "13.0.1" (was "12.3.1")...
    Updating package.json with dependency @angular-eslint/template-parser @ "13.0.1" (was "12.3.1")...
    Updating package.json with dependency @angular/cli @ "13.1.3" (was "12.1.1")...
    Updating package.json with dependency @angular/compiler-cli @ "13.1.2" (was "12.1.1")...
    Updating package.json with dependency @angular/language-service @ "13.1.2" (was "12.1.1")...
    Updating package.json with dependency typescript @ "4.5.4" (was "4.3.5")...
    Updating package.json with dependency @angular/animations @ "13.1.2" (was "12.1.1")...
    Updating package.json with dependency @angular/cdk @ "13.1.2" (was "12.1.1")...
    Updating package.json with dependency @angular/common @ "13.1.2" (was "12.1.1")...
    Updating package.json with dependency @angular/compiler @ "13.1.2" (was "12.1.1")...
    Updating package.json with dependency @angular/core @ "13.1.2" (was "12.1.1")...
    Updating package.json with dependency @angular/forms @ "13.1.2" (was "12.1.1")...
    Updating package.json with dependency @angular/material @ "13.1.2" (was "12.1.1")...
    Updating package.json with dependency @angular/platform-browser @ "13.1.2" (was "12.1.1")...
    Updating package.json with dependency @angular/platform-browser-dynamic @ "13.1.2" (was "12.1.1")...
    Updating package.json with dependency @angular/router @ "13.1.2" (was "12.1.1")...
  UPDATE package.json (2267 bytes)
✔ Packages successfully installed.
** Executing migrations of package '@angular-eslint/schematics' **

> Updates @angular-eslint to v13.
  UPDATE package.json (2265 bytes)
✔ Packages installed successfully.
  Migration completed.

** Executing migrations of package '@angular/cli' **

> Remove polyfills required only for Internet Explorer which is no longer supported.
  UPDATE src/polyfills.ts (2393 bytes)
  Migration completed.

> Remove no longer valid Angular schematic options from `angular.json`.
  Migration completed.

> Remove deprecated options from 'angular.json' that are no longer present in v13.
  Migration completed.

> Updating '.gitignore' to include '.angular/cache'.
  UPDATE .gitignore (693 bytes)
  Migration completed.

> Update library projects to be published in partial mode and removed deprecated options from ng-packagr configuration.
  Migration completed.

** Executing migrations of package '@angular/cdk' **

> Updates the Angular CDK to v13.
    
      ✓  Updated Angular CDK to version 13

  Migration completed.

** Executing migrations of package '@angular/core' **

> Migrates `[routerLink]=""` in templates to `[routerLink]="[]"` because these links are likely intended to route to the current page with updated fragment/query params.
  Migration completed.

> In Angular version 13, the `teardown` flag in `TestBed` will be enabled by default.
  This migration automatically opts out existing apps from the new teardown behavior.
  UPDATE src/test.ts (817 bytes)
  Migration completed.

> As of Angular version 13, `entryComponents` are no longer necessary.
  UPDATE src/app/core/core.module.ts (2111 bytes)
  Migration completed.

** Executing migrations of package '@angular/material' **

> Updates Angular Material to v13.

      ✓  Updated Angular Material to version 13

  Migration completed.

はい、無事にバージョンが13にあがりました😊

b, グローバルの CLI をバージョンアップ

あとは最後にグローバルの CLI をバージョンアップします。
コマンドは下記です、わたしはいつもこの3点セットを流しています。
①現在のCLIを削除して、②キャッシュをクリア、③最新のCLIをインストールします。
②はよくネットで見かけるので実行しています。

npm uninstall -g @angular/cli
npm cache verify
npm install -g @angular/cli@latest

c, グローバルの CLI のバージョン確認

下記コマンドでインストールしたCLIのバージョンを確認します。

ng version

実行結果はこちらです。

ng version

     _                      _                 ____ _     ___ 
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | | 
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | 
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 13.1.3
Node: 16.13.0
Package Manager: npm 8.1.0
OS: win32 x64

Angular: 13.1.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.3
@angular-devkit/build-angular   13.1.3
@angular-devkit/core            12.1.1
@angular-devkit/schematics      12.1.1
@angular/cli                    13.1.3
@schematics/angular             12.1.1
rxjs                            6.6.7
typescript                      4.5.4

はい、こちらもバージョンが13にあがりました😊

4. ソースの修正点

わたしの環境では今回 Anglar Material でソースを修正する必要がありました。
入力必須に設定しているインプットのプレースホルダーの右側に * マークが表示されるようになりました。
そもそもわたしの環境では必須項目の左側に手動で * マークを表示していたので、 左右両方に表示されるようになりました、下の画像のような感じです。
(左の青枠がもともと設定していた * マークで、右の赤枠が今回表示されるようになった方)
これを見た時すこし笑いました! 面白い状況ですね。
f:id:tetsufuru:20220116001306p:plain:w500

結局どのように修正したかというと
今回表示されるようになった * マークは、TypeScript側の ReactiveForms の必須バリデーションで自動判定しているようなので、 新しい方をそのまま残すことにして、もともと手動で設定していた分を削除しました。
その方が今後メンテしやすいかと思います。

今日の感想


このV13へのバージョンアップはわたし的にこれまでで一番難しかったように思います。
--forceオプションを数年ぶりに使いました。
Angularをお使いの皆様は今回どのようにバージョンアップされたのかが気になるところです。

余談になりますがわたしは Udemy の Angular コースを公開していて、コース受講生の方々にも同じようなバージョンアップ作業をお願いしたところです。
ちょっと難しい作業なのではたして作業していただけるかどうか?
作業していただけたとしても無事バージョンアップできるだとろうか?と心配する今日この頃です。

では本年もよろしくお願いします。