Angular アップデート手順書

2022/06/26に公開約6,200字

基本

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

アップデート手順

  • 公式ガイド を参照
  • バージョンを指定
    • 現在のプロダクトのバージョンとアップデートする 必ず一つ上 のバージョンを指定します。
  • App Complexity(複雑度)の指定
    • Basic を選んでおけば、基本的に大丈夫です。
  • Other Dependencies の指定
    • 該当する項目をチェックします

ex. Angular v12.x => Angular v13.x
ex. Angular v12.x => Angular v13.x

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

アップデート実施項目
アップデート実施項目

アップデート実施

Angular v12.x => Angular v13.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, の互換性情報

Angular, NodeJS, TypeScript, RxJS, の互換性情報

アップデート後の作業

アップデート後の作業

各種スクリプトを実行

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

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

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

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

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

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

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

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

$ ng update @angular/core@v13.3.3 @angular/cli@v13.3.3

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

$ ng update @angular/cdk@v13.x @angular/material@v13.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

まとめ

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

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

Tips

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

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

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

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 を参照してください。

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

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

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

$ npm install -g npm-check-updates

npm-check-updates を実行例

  • ncu を実行
$ cd some-folder
$ ncu -u
Using yarn
Upgrading /Users/akihiko.kigure/work/some-folder/package.json
[====================] 134/134 100%
 webpack                                   5.70.0  →   5.73.0
 webpack-cli                                4.9.2  →   4.10.0
 eslint                                    7.22.0  →   8.18.0
 eslint-config-prettier                     8.1.0  →    8.5.0
 eslint-plugin-cypress                    ^2.10.3  →  ^2.12.1
 eslint-plugin-import                     ^2.25.4  →  ^2.26.0
 jasmine-core                              ~3.5.0  →   ~4.2.0
 jasmine-spec-reporter                     ~5.0.0  →   ~7.0.0
 jest                                      27.2.3  →   28.1.1
 jest-preset-angular                       10.0.1  →   12.1.0
 karma                                     ~6.3.4  →   ~6.4.0
 karma-chrome-launcher                     ~3.1.0  →   ~3.1.1
 karma-coverage-istanbul-reporter          ~3.0.2  →   ~3.0.3
 karma-jasmine                             ~3.3.0  →   ~5.1.0
 karma-jasmine-html-reporter               ^1.5.0  →   ^2.0.0
 lint-staged                              ^10.5.4  →  ^13.0.2
 msw                                      ^0.38.2  →  ^0.42.3
 ng-lint-staged                            ^0.1.6  →  ^12.0.4
 prettier                                   2.4.1  →    2.7.1

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

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

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

  • 「–no-save」とするのは、これを指定しないと package.json が作成されてしまいます。

    $ mkdir test-project
    $ cd test-project
    $ npm i @angular/cli@v13.x --no-save
    

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

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

    $ npx ng new test-project --directory=./
    

差分比較ファイル(主に設定・環境ファイル)

  • angular.json
  • main.ts
  • polyfills.ts
  • tsconfig.???.json
GitHubで編集を提案

Discussion

ログインするとコメントできます