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 の CLI でng 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 でソースを修正する必要がありました。
入力必須に設定しているインプットのプレースホルダーの右側に * マークが表示されるようになりました。
そもそもわたしの環境では必須項目の左側に手動で * マークを表示していたので、
左右両方に表示されるようになりました、下の画像のような感じです。
(左の青枠がもともと設定していた * マークで、右の赤枠が今回表示されるようになった方)
これを見た時すこし笑いました! 面白い状況ですね。
結局どのように修正したかというと
今回表示されるようになった * マークは、TypeScript側の ReactiveForms の必須バリデーションで自動判定しているようなので、
新しい方をそのまま残すことにして、もともと手動で設定していた分を削除しました。
その方が今後メンテしやすいかと思います。
今日の感想
このV13へのバージョンアップはわたし的にこれまでで一番難しかったように思います。
--force
オプションを数年ぶりに使いました。
Angularをお使いの皆様は今回どのようにバージョンアップされたのかが気になるところです。
余談になりますがわたしは Udemy の Angular コースを公開していて、コース受講生の方々にも同じようなバージョンアップ作業をお願いしたところです。
ちょっと難しい作業なのではたして作業していただけるかどうか?
作業していただけたとしても無事バージョンアップできるだとろうか?と心配する今日この頃です。
では本年もよろしくお願いします。