✨

Angular アップデート手順書

2022/06/26に公開

Angular

tech

基本

公式ガイド で、手順を確認
メジャーバージョンは、必ず一つずつ 上げる
- ex. Angular v16.x => Angular v17.x

アップデート手順

公式ガイドを参照
バージョンを指定
- 現在のプロダクトのバージョンとアップデートする 必ず一つ上 のバージョンを指定します。
  - https://update.angular.io/?v=16.0-17.0
  - ex. Angular v16.x => Angular v17.x
App Complexity（複雑度）の指定
- Basic を選んでおけば、基本的に大丈夫です。
Other Dependencies の指定
- 該当する項目をチェックします

ex. Angular v16.x => Angular v17.x

Show me how to update! をクリックすると下図手順が表示されます。

アップデート実施項目

アップデート実施

Angular v16.x => Angular v17.x の場合、アップデート前に実施する作業はありません。

During the Update / アップデートの実施

@angular/core, @angular/cli のアップデート
```
$ ng update @angular/core @angular/cli
```
@angular/material のアップデート
```
$ ng update @angular/material
```
TypeScript のバージョン変更については、上図メッセージに従って確認して下さい
Node のバージョンも上図メッセージ従って、適切なバージョンに変更して下さい。

バージョン互換性情報

Angular, NodeJS, TypeScript, RxJS, の互換性情報は、下記リンクを御覧下さい。

アップデート後の作業

各種スクリプトを実行

ビルド、テスト等のエラーの確認
プロダクト毎にいずれかのコマンドを実行して下さい

$ npm run build
　　or
$ yarn build

プロダクトの簡易打鍵確認

バージョンアップ後のエラーの確認
プロダクト毎にいずれかのコマンドを実行して下さい

$ npm run start
　　or
$ yarn start

Angular アップデート実行コマンド例

v17 の最新バージョンで、アップデートする場合

$ ng update @angular/core@v17.x @angular/cli@v17.x

v17 のマイナーバージョンまで指定して、アップデートする場合

$ ng update @angular/core@v17.0.1 @angular/cli@v17.0.3

Angular CDK, Angular Materail をアップデートする場合

$ ng update @angular/cdk@v17.x @angular/material@v17.x

先行バージョンで、アップデートする場合

先行バージョン（ex v14.1.0-next.0 or v14.1.0-rc.0）ですので、参考まで
--force オプションをつけないと上手く行かないことがあります

$ ng update @angular/core --next --force
$ ng update @angular/cli --next --force

まとめ

ng update コマンドで、基本的にアップデートは完了します。
サポート期間については、サポートポリシーとスケジュールを確認して下さい
アップデートがどのような変更があったかを理解したい場合は、以下の項目を参照して下さい
- 参考：アップデート毎のファイル差分
- アップデートしたいバージョンで新規プロジェクトを作成して差分を確認する

参考：アップデート毎のファイル差分

アップデート毎のファイル差分

Tips

アップデート前に実施する作業がある場合

ex. Angular v9.x => Angular v10.x の場合、アップデート前に下記作業が必要となります。

ex. Angular v9.x => Angular v10.x

Angular 9 では、Angular の国際化（i18n）に依存する場合にロードする必要があるグローバルな $localize() 関数が導入されました。 ng add @angular/localize を実行して、必要なパッケージとコード変更を追加します。変更の詳細については、the $localize Global Import Migration guide を参照してください。

アップデート前に実施する作業が`無い`場合

アップデート前に実施する作業が無い場合

ex. Angular v16.x => Angular v17.x

任意：package.json の他ライブラリのバージョンアップを確認する手順

npm-check-updates を使用する場合

npm-check-updates をグローバルインストール

$ npm install -g npm-check-updates

npm-check-updates を実行例

ncu を実行

$ cd some-folder
$ ncu -u
Using yarn
Upgrading /Users/lifewood/work/some-folder/package.json
[====================] 134/134 100%
 @types/jasmine                      ~4.3.0  →    ~5.1.1
 jasmine-core                        ~4.6.0  →    ~5.1.1
 karma                               ~6.4.0  →    ~6.4.2
 karma-coverage                      ~2.2.0  →    ~2.2.1
 rxjs                                ~7.8.0  →    ~7.8.1
 tslib                               ^2.3.0  →    ^2.6.2
 typescript                          ~5.1.3  →    ~5.2.2
 zone.js                            ~0.13.0  →   ~0.14.0

アップデートしたいバージョンで新規プロジェクトを作成して差分を確認する

ディレクトリ作成、上げたいバージョン @angular/cli をローカルインストール

「–no-save」とするのは、これを指定しないと package.json が作成されてしまいます。
```
$ mkdir test-project
$ cd test-project
$ npm i @angular/cli@v17.x --no-save
```

作成したディレクトリに Angular 新規プロジェクトを作成

「--directory=./」をつけるとカレントディレクトリにプロジェクトを作成してくれます。
```
$ npx ng　new test-project --directory=./
```

差分比較ファイル（主に設定・環境ファイル）

angular.json
main.ts
polyfills.ts
tsconfig.???.json

GitHubで編集を提案