見出し画像
Photo by shinobuwada

【ng update】Angular 9 へバージョンアップする方法｜Angular 8 やさしい勉強会

下妻千乃

2020 年 2 月 7 日（金）、Angular バージョン 9 がリリースされたとアナウンスがありました。

早速、アップデートしてみましょう！


Angular バージョン 9 へのアップデート概要

アップデート方法の大まかな概要が、先のブログ内に記載されています。

Visit update.angular.io for detailed information and guidance. To have the best update experience, we recommend you first update to the final release of Angular 8.
詳細情報とガイダンスについては、update.angular.io をご覧ください。 最高のアップデート体験を得るために、まず Angular 8 の最終リリースにアップデートすることをお勧めします。

・First, update to the latest version of 8
・Then, update to 9

先ず、バージョン 8 の最新状態にした後に、それから 9 へアップデートしましょう、とありますね。

それら手順は以下の、Angular 公式で用意されているアップデート・チェックツールでも丁寧に説明されています。

現在の Angular バージョンに応じたアップデート方法を確認できるので、とても便利なチェックツールです。

私は「Angular Material」を利用しているので、

・I use Angular Material

こちらにチェックを入れました。チェックを入れると、説明が「Angular Material」を利用している前提の内容に変化しましたね。

バージョンアップの詳細情報・変更点の全容は、以下「Updating to Angular version 9」公式サイトにも記載されています。

では、チェックツールに記載されている手順に従って、アップデートを行っていきます！


現在の Angular バージョンを確認

あれ、私って今、バージョンいくつの使ってるんだっけ、と、意外と覚えていないものです。記憶に頼らず、すぐに確認しましょう！

コマンド「ng version」で確認します。

PS D:\angular> ng version

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


Angular CLI: 8.3.19
Node: 12.13.0
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.803.19
@angular-devkit/build-angular      0.803.19
@angular-devkit/build-optimizer    0.803.19
@angular-devkit/build-webpack      0.803.19
@angular-devkit/core               8.3.19
@angular-devkit/schematics         8.3.19
@angular/cdk                       8.2.3
@angular/cli                       8.3.19
@angular/flex-layout               8.0.0-beta.27
@angular/material                  8.2.3
@angular/material-moment-adapter   8.2.3
@ngtools/webpack                   8.3.19
@schematics/angular                8.3.19
@schematics/update                 0.803.19
rxjs                               6.4.0
typescript                         3.5.3
webpack                            4.39.2

PS D:\angular>


現在の Node バージョンを確認

Make sure you are using Node 10.13 or later.
Node 10.13 以降を使用していることを確認してください。

Node バージョンは、以下のコマンド「node -v」で確認できます。

PS D:\angular> node -v
v12.13.0
PS D:\angular>

私は条件を満たしていました！


最新の Angular 8.x バージョンへ更新

Run ng update @angular/core@8 @angular/cli@8 in your workspace directory to update to the latest 8.x version of @angular/core and @angular/cli and commit these changes.

以下のコマンド「ng update @angular/core@8 @angular/cli@8」で更新します。

PS D:\angular> ng update @angular/core@8 @angular/cli@8
The installed Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
C:\Users\xxx\AppData\Local\Temp\.ng-temp-packages-ZKtyJP\ng -> C:\Users\xxx\AppData\Local\Temp\.ng-temp-packages-ZKtyJP\node_modules\@angular\cli\bin\ng
npm WARN lifecycle The node binary used for scripts is C:\Program Files (x86)\Nodist\bin\node.exe but npm is using C:\Program Files (x86)\Nodist\v-x64\12.13.0\node.exe itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> @angular/cli@9.0.1 postinstall C:\Users\xxx\AppData\Local\Temp\.ng-temp-packages-ZKtyJP\node_modules\@angular\cli
> node ./bin/postinstall/script.js

+ @angular/cli@9.0.1
added 261 packages from 206 contributors in 54.191s


  ╭────────────────────────────────────────────────────────────────╮
  │                                                                │
  │      New minor version of npm available! 6.9.0 -> 6.13.7       │
  │   Changelog: https://github.com/npm/cli/releases/tag/v6.13.7   │
  │               Run npm install -g npm to update!                │
  │                                                                │
  ╰────────────────────────────────────────────────────────────────╯

Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 36 dependencies.
Fetching dependency metadata from registry...
Package '@angular/core' is already up to date.
   Updating package.json with dependency @angular/cli @ "8.3.25" (was "8.3.19")...
   Updating package.json with dependency @angular-devkit/build-angular @ "0.803.25" (was "0.803.19")...
UPDATE package.json (1503 bytes)
√ Packages installed successfully.
PS D:\angular>

問題なく成功しました。

が、私は npm をバージョンアップするように促されてしまったので、次の手順へ移る前に、先に npm をバージョンアップしておきます。

PS D:\angular> npm install -g npm
C:\Program Files (x86)\Nodist\bin\npm -> C:\Program Files (x86)\Nodist\bin\node_modules\npm\bin\npm-cli.js
C:\Program Files (x86)\Nodist\bin\npx -> C:\Program Files (x86)\Nodist\bin\node_modules\npm\bin\npx-cli.js
+ npm@6.13.7
added 8 packages from 4 contributors, removed 4 packages and updated 20 packages in 12.087s
PS D:\angular>


Angular バージョン 9 へ更新

Run ng update @angular/core @angular/cli which should bring you to version 9 of Angular.

以下のコマンド「ng update @angular/core @angular/cli」で更新します。

PS D:\angular> ng update @angular/core @angular/cli
The installed 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.
Repository is not clean. Please commit or stash any changes before updating.
PS D:\angular>

先にコミットしなさいと警告されてしまいました。そういえば、

～～～ and commit these changes.

と書いてありましたね！

では、Git へコミットした後に、もう一度、コマンド「ng update @angular/core @angular/cli」を実行します。

PS D:\angular> ng update @angular/core @angular/cli
The installed 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 @ "9.0.1" (was "8.3.25")...
   Updating package.json with dependency @angular/core @ "9.0.0" (was "8.2.14")...
   Updating package.json with dependency @angular-devkit/build-angular @ "0.900.1" (was "0.803.25")...
   Updating package.json with dependency @angular/language-service @ "9.0.0" (was "8.2.14")...
   Updating package.json with dependency @angular/compiler-cli @ "9.0.0" (was "8.2.14")...
   Updating package.json with dependency @angular/common @ "9.0.0" (was "8.2.14")...
   Updating package.json with dependency @angular/animations @ "9.0.0" (was "8.2.14")...
   Updating package.json with dependency @angular/platform-browser @ "9.0.0" (was "8.2.14")...
   Updating package.json with dependency @angular/platform-browser-dynamic @ "9.0.0" (was "8.2.14")...
   Updating package.json with dependency @angular/compiler @ "9.0.0" (was "8.2.14")...
   Updating package.json with dependency @angular/forms @ "9.0.0" (was "8.2.14")...
   Updating package.json with dependency @angular/router @ "9.0.0" (was "8.2.14")...
   Updating package.json with dependency rxjs @ "6.5.4" (was "6.4.0")...
   Updating package.json with dependency typescript @ "3.7.5" (was "3.5.3")...
   Updating package.json with dependency zone.js @ "0.10.2" (was "0.9.1")...
UPDATE package.json (1492 bytes)
√ Packages installed successfully.
** Executing migrations of package '@angular/cli' **

> Angular Workspace migration.
 Update an Angular CLI workspace to version 9.
UPDATE angular.json (3797 bytes)
UPDATE tsconfig.app.json (272 bytes)
UPDATE package.json (1495 bytes)
√ Packages installed successfully.
 Migration completed.

> Lazy loading syntax migration.
 Update lazy loading syntax to use dynamic imports.
UPDATE src/app/app-routing.module.ts (637 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
PS D:\angular>

いよっ、成功しました！


Angular Material を更新

Run ng update @angular/material.

私は「Angular Material」を利用していますので、以下のコマンド「ng update @angular/material」で更新します。

PS D:\angular> ng update @angular/material
Repository is not clean. Please commit or stash any changes before updating.
PS D:\angular>

あ、また、コミットしなさい、と警告されてしまいました。

そういえば、先程、幾らか「Migration（マイグレーション）」ログが出ていたので、Git へコミットついでに、コード差分を確認してみましょう。

私の場合、以下のように、「Routes」の「loadChildren」の記述が自動変更されていました。

（自動変更前）

const routes: Routes = [
  {path: '', component: SignInComponent, canActivate: [SignInGuard]},
  {path: 'home', loadChildren: './home/home.module#HomeModule', canLoad: [SignInGuard]}
];

↓

（自動変更後）

const routes: Routes = [
 {path: '', component: SignInComponent, canActivate: [SignInGuard]},
 {path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule), canLoad: [SignInGuard]}
];

これだけではなく、また、「ViewChild」の「static」に自動変更がありました。

（自動変更前）

@ViewChild('fromInput', {static: false}) fromInput: ElementRef;

↓

（自動変更後）

@ViewChild('fromInput') fromInput: ElementRef;

脱線してしまいました。

では、Git へコミットした後に、もう一度、コマンド「ng update @angular/material」を実行します。

PS D:\angular> ng update @angular/material
Using package manager: 'npm'
Collecting installed dependencies...
Found 36 dependencies.
Fetching dependency metadata from registry...
                 Package "@angular/flex-layout" has an incompatible peer dependency to "@angular/cdk" (requires "^8.0.0-rc.0", would install "9.0.0").
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.
PS D:\angular>

あ、「@angular/flex-layout」が依存していると警告されてしまいました。

一筋縄ではいかない。

「--force」すると、無視して続行すると書いてありますが、それでは解決しません！

一緒に更新するのが正解です。

以下のコマンド「ng update @angular/material @angular/flex-layout」を実行します。一緒に同時に更新すれば問題ないです。知らないとハマりますね！

PS D:\angular> ng update @angular/material @angular/flex-layout
Using package manager: 'npm'
Collecting installed dependencies...
Found 36 dependencies.
Fetching dependency metadata from registry...
   Updating package.json with dependency @angular/flex-layout @ "9.0.0-beta.29" (was "8.0.0-beta.27")...
   Updating package.json with dependency @angular/material @ "9.0.0" (was "8.2.3")...
   Updating package.json with dependency @angular/cdk @ "9.0.0" (was "8.2.3")...
   Updating package.json with dependency @angular/material-moment-adapter @ "9.0.0" (was "8.2.3")...
UPDATE package.json (1494 bytes)
√ Packages installed successfully.
** Executing migrations of package '@angular/material' **

> Updates Angular Material to v9

   ⚠  General notice: The HammerJS v9 migration for Angular Components is not able to migrate tests. Please manually clean up tests in your project if they rely on HammerJS.
   Read more about migrating tests: https://git.io/ng-material-v9-hammer-migrate-tests

     ✓  Updated Angular Material to version 9

UPDATE src/app/home/home.module.ts (9421 bytes)
UPDATE src/app/app.module.ts (2239 bytes)
UPDATE src/main.ts (373 bytes)
UPDATE package.json (1468 bytes)
√ Packages installed successfully.
 Migration completed.

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

> Updates the Angular CDK to v9

     ✓  Updated Angular CDK to version 9

 Migration completed.

PS D:\angular>

無事、成功しました。

コード差分を確認してみましょう。

（自動変更前）

import { MatDialog, MatSnackBar } from '@angular/material';

↓

（自動変更後）

import { MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';

これらコード差分は、チェックツールの「バージョンアップ前」説明に書いてあった以下の通りですね。

Instead of importing from @angular/material, you should import deeply from the specific component. E.g. @angular/material/button. ng update will do this automatically for you.
@angular/material からインポートする代わりに、特定のコンポーネントから深くインポートする必要があります。例えば、@angular/material/button。ng update はこれを自動的に行います。


動作確認

では、問題なく、ちゃんと正常にアプリが動作するのか、確認してみましょう！

PS D:\angular> ng serve
? Would you like to share anonymous usage data about this project with the Angular Team at
Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more
details and how to change this setting, see http://angular.io/analytics. (y/N)
このプロジェクトに関する匿名の使用データを Angular チームと共有しますか？

「y（yes）」してみます。

PS D:\angular> ng serve
? Would you like to share anonymous usage data about this project with the Angular Team at
Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more
details and how to change this setting, see http://angular.io/analytics. Yes

Thank you for sharing anonymous usage data. Would you change your mind, the following
command will disable this feature entirely:

   ng analytics project off

0% compiling
Compiling @angular/core : es2015 as esm2015

Compiling @angular/common : es2015 as esm2015

Compiling @angular/platform-browser : es2015 as esm2015

Compiling @angular/platform-browser-dynamic : es2015 as esm2015

Compiling @angular/flex-layout/core : es2015 as esm2015

Compiling @angular/flex-layout/extended : es2015 as esm2015

Compiling @angular/cdk/bidi : es2015 as esm2015

Compiling @angular/flex-layout/flex : es2015 as esm2015

Compiling @angular/flex-layout/grid : es2015 as esm2015

Compiling @angular/flex-layout : es2015 as esm2015

Compiling @angular/forms : es2015 as esm2015

Compiling @angular/common/http : es2015 as esm2015

Compiling @angular/animations : es2015 as esm2015

Compiling @angular/animations/browser : es2015 as esm2015

Compiling @angular/platform-browser/animations : es2015 as esm2015

Compiling @angular/cdk/keycodes : es2015 as esm2015

Compiling @angular/cdk/platform : es2015 as esm2015

Compiling @angular/cdk/observers : es2015 as esm2015

Compiling @angular/cdk/a11y : es2015 as esm2015

Compiling @angular/material/core : es2015 as esm2015

Compiling @angular/material/button : es2015 as esm2015

Compiling @angular/cdk/collections : es2015 as esm2015

Compiling @angular/cdk/scrolling : es2015 as esm2015

Compiling @angular/cdk/portal : es2015 as esm2015

Compiling @angular/cdk/overlay : es2015 as esm2015

Compiling @angular/material/dialog : es2015 as esm2015

Compiling @angular/material/form-field : es2015 as esm2015

Compiling @angular/material/icon : es2015 as esm2015

Compiling @angular/cdk/text-field : es2015 as esm2015

Compiling @angular/material/input : es2015 as esm2015

Compiling @angular/material/progress-bar : es2015 as esm2015

Compiling @angular/cdk/layout : es2015 as esm2015

Compiling @angular/material/tooltip : es2015 as esm2015

Compiling @angular/material/select : es2015 as esm2015

Compiling @angular/material/paginator : es2015 as esm2015

Compiling @angular/router : es2015 as esm2015

Compiling @angular/material/snack-bar : es2015 as esm2015

Compiling @angular/material/badge : es2015 as esm2015

Compiling @angular/material/chips : es2015 as esm2015

Compiling @angular/material/datepicker : es2015 as esm2015

Compiling @angular/material/divider : es2015 as esm2015

Compiling @angular/cdk/accordion : es2015 as esm2015

Compiling @angular/material/expansion : es2015 as esm2015

Compiling @angular/material/list : es2015 as esm2015

Compiling @angular/material/menu : es2015 as esm2015

Compiling @angular/material/radio : es2015 as esm2015

Compiling @angular/material/sidenav : es2015 as esm2015

Compiling @angular/cdk/table : es2015 as esm2015

Compiling @angular/material/sort : es2015 as esm2015

Compiling @angular/material/table : es2015 as esm2015

Compiling @angular/material/tabs : es2015 as esm2015

Compiling @angular/material/toolbar : es2015 as esm2015

Compiling @angular/material/checkbox : es2015 as esm2015

Compiling @angular/material/progress-spinner : es2015 as esm2015

Compiling @angular/cdk/drag-drop : es2015 as esm2015

Compiling @angular/material-moment-adapter : es2015 as esm2015

chunk {home-home-module} home-home-module.js, home-home-module.js.map (home-home-module) 3.18 MB  [rendered]
chunk {main} main.js, main.js.map (main) 215 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 140 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 9 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 596 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 5.86 MB [initial] [rendered]
Date: 2020-02-11T05:26:23.579Z - Hash: 22960845f43d1cf0e44a - Time: 176312ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

Date: 2020-02-11T05:26:32.204Z - Hash: 22960845f43d1cf0e44a
6 unchanged chunks

Time: 7039ms
: Compiled successfully.

ローカルサーバで、アプリは無事、正常に動作しました！

このプロジェクトに関する匿名の使用データを Angular チームと共有しますか？

に関しては、オフにできるコマンドがログに載っていたので、実施してみます。

PS D:\angular> ng analytics project off
PS D:\angular>


ビルド確認

PS D:\angular> ng build --prod
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

chunk {0} runtime-es2015.d1ecef9dd2bfde324cc5.js (runtime) 2.24 kB [entry] [rendered]
chunk {0} runtime-es5.d1ecef9dd2bfde324cc5.js (runtime) 2.23 kB [entry] [rendered]
chunk {2} polyfills-es2015.ca64e4516afbb1b890d5.js (polyfills) 35.6 kB [initial] [rendered]
chunk {3} polyfills-es5.277e2e1d6fb2daf91a5c.js (polyfills-es5) 127 kB [initial] [rendered]
chunk {5} 5-es2015.36de8a941be569a6a437.js () 749 kB  [rendered]
chunk {5} 5-es5.36de8a941be569a6a437.js () 795 kB  [rendered]
chunk {1} main-es2015.176299f585e803d08750.js (main) 1.03 MB [initial] [rendered]
chunk {1} main-es5.176299f585e803d08750.js (main) 1.15 MB [initial] [rendered]
chunk {4} styles.9e87507bd9225f485258.css (styles) 81.9 kB [initial] [rendered]
Date: 2020-02-11T05:35:06.036Z - Hash: 2ab0796e33ee529f87f5 - Time: 111552ms


PS D:\angular>

問題ないですね！


余談：HammerJS が削除

コード差分を確認していたら、「HammerJS」のインポートが丸々削除されていました。「HammerJS」は Angular でジェスチャー制御を幾らか担っていたと認識していますが、今回 V9 でそれらに依存しない Angular が誕生したようです。以下「V9 HammerJS migration」に詳細が記載されています。


余談：Angular のバージョンとリリース

以下に「Angular のバージョンとリリース」について書かれています。


この記事が気に入ったらサポートをしてみませんか？