Angular 9 で Web アプリを作ろう - わたしも今日からバージョン 9
今日すること
こんにちは、ふるてつです。
年明けついにAngularがバージョン 9 になりました。
今日は製造中の自分のAngularをバージョンアップしてみました。
バージョンアップ情報の確認
まずはこちらのサイトで手順やその他情報をチェックします。
https://update.angular.io/#8.0:9.0
ここに書いてある手順は実際には行いません。
ng updateコマンドで大体のことができるからです。
困ったときなど用にすこし参考にするだけです。
TypeScriptは今回3.7にあがりそうです。
materialもあがりますねー。
@angular/localizeのことが書いてあるようですが、わたしは他言語化はngx-translateを使っているので関係なさそうです。
この感じだと今回もng updateのコマンドの実行だけで済みそうです。
ng updateコマンド
早速ですがAngularのcliでng updateコマンドを実行します。
すると下記のリストがでてきました。
今回はcliとcoreとmaterialの３つのバージョンアップ作業が必要そうです。
ng update
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 39 dependencies.
We analyzed your package.json, there are some packages to update:
Name Version Command to update
-------------------------------------------------------------------------------
@angular/cli 8.3.22 -> 9.0.2 ng update @angular/cli
@angular/core 8.2.14 -> 9.0.1 ng update @angular/core
@angular/material 8.2.3 -> 9.0.0 ng update @angular/material
実際にバージョンアップするコマンドですが、上のリストの最後右端に書いてあります。
コマンド実行する順番はcoreが最初で、次cli、そしてmaterialがこれまでの経験的に良い気がします。
しかし今回はcliを忘れて飛ばしてしまい、cliが最後になりました。
バージョンアップ実施
angular/coreのバージョンアップ
まず最初にcoreをバージョンアップします。
ng update @angular/core
ng update @angular/core
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 39 dependencies.
Fetching dependency metadata from registry...
Package "@angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=3.1 < 3.6", would install "3.7.5").
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.
おや、警告が出ました。
Typescriptがらみのわたしがちょっと苦手なタイプの警告ですね。
「Typescriptのバージョンが3.7.5に上がりますが、>=3.1 < 3.6が必要なので上がりすぎます」という旨と思います。
最初にみたサイトでそもそもTypescriptは3.7に上がるようでしたので、ここは無視してバージョンアップを続けます。
（もし動かなければ、Typescriptだけ後でバージョンを下げます）
ではng update @angular/core --forceコマンドを流します（--forceオプションをつけて強制実行）
ng update @angular/core --force
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 39 dependencies.
Fetching dependency metadata from registry...
Package "@angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=3.1 < 3.6", would install "3.7.5").
Updating package.json with dependency @angular/core @ "9.0.1" (was "8.2.14")...
Updating package.json with dependency @angular/language-service @ "9.0.1" (was "8.2.14")...
Updating package.json with dependency @angular/forms @ "9.0.1" (was "8.2.14")...
Updating package.json with dependency @angular/platform-browser @ "9.0.1" (was "8.2.14")...
Updating package.json with dependency @angular/animations @ "9.0.1" (was "8.2.14")...
Updating package.json with dependency @angular/platform-browser-dynamic @ "9.0.1" (was "8.2.14")...
Updating package.json with dependency @angular/common @ "9.0.1" (was "8.2.14")...
Updating package.json with dependency @angular/router @ "9.0.1" (was "8.2.14")...
Updating package.json with dependency @angular/compiler @ "9.0.1" (was "8.2.14")...
Updating package.json with dependency @angular/compiler-cli @ "9.0.1" (was "8.2.14")...
Updating package.json with dependency zone.js @ "0.10.2" (was "0.9.1")...
Updating package.json with dependency typescript @ "3.7.5" (was "3.5.3")...
UPDATE package.json (1658 bytes)
√ Packages installed successfully.
** 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
おっ、良い感じのようです。
angular/materialのバージョンアップ
次はmaterialを上げます。
（順番的にはcliだと思うのですが、忘れてて飛ばしました）
ng update @angular/material
ng update @angular/material
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 39 dependencies.
Fetching dependency metadata from registry...
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")...
UPDATE package.json (1658 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/main.ts (373 bytes)
UPDATE package.json (1632 bytes)
/ Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site- Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site\ Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site| Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site/ Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site- Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site\ Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site| Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site- Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site| Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site- Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site\ Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site| Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site- Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site\ Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site| Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site/ Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site- Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site\ Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site| Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site/ Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site- Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site| Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site/ Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site- Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site\ Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site/ Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site- Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site\ Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site| Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site/ Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site- Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site\ Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site| Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site/ Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site- Installing packages...[ .................] | preinstall:product-manage-site-for-hands-on: info lifecycle product-manage-site- Installing packages...[ ...........] | extract:fsevents: verb lock using C:\Users\tetsuji\AppData\Roaming\npm-cache\_l\ Installing packages...[ ...........] | extract:fsevents: verb lock using C:\Users\tetsuji\AppData\Roaming\npm-cache\_l| Installing packages...[ ...........] | extract:fsevents: verb lock using C:\Users\tetsuji\AppData\Roaming\npm-cache\_l/ Installing packages...[ ...........] | extract:fsevents: verb lock using C:\Users\tetsuji\AppData\Roaming\npm-cache\_l- Installing packages...[ ..........] / extract:bindings: sill extract bindings@1.5.0 extracted to C:\papa\00.default\1\ Installing packages...[ .........] \ extract:file-uri-to-path: sill extract file-uri-to-path@1.0.0 extracted to C:\p| Installing packages...[ .........] \ extract:file-uri-to-path: sill extract file-uri-to-path@1.0.0 extracted to C:\p/ Installing packages...[ ........] | extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse- Installing packages...[ ........] | extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse\ Installing packages...[ ........] | extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse| Installing packages...[ ........] | extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse/ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse- Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse\ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse| Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse/ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse- Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse\ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse| Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse/ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse- Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse\ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse| Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse/ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse- Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse\ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse| Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse/ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse- Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse\ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse| Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse/ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse- Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse\ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse| Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse/ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse- Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse\ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse| Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse/ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse- Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse\ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse| Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse/ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse- Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse\ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse| Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse/ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse- Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse| Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse/ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse- Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse\ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse| Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse/ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse- Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse\ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse| Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse/ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse- Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse\ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse| Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse/ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse- Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse\ Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse| Installing packages...[ ........] \ extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse/ Installing packages...[ ........] | extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse- Installing packages...[ ........] / extract:nan: sill extract nan@2.14.0 extracted to C:\papa\00.default\12.Benesse\ Installing packages...[ .......] - extract:fsevents: sill extract fsevents@1.2.11 extracted to C:\papa\00.default\| Installing packages...[ .......] - extract:fsevents: sill extract fsevents@1.2.11 extracted to C:\papa\00.default\/ Installing packages...[ .......] - extract:fsevents: sill extract fsevents@1.2.11 extracted to C:\papa\00.default\| Installing packages...[ ......] / finalize:code-point-at: sill finalize C:\papa\00.default\12.Benesse\product-man/ Installing packages...[ ......] / finalize:isarray: sill finalize C:\papa\00.default\12.Benesse\product-manage-si- Installing packages...[ ......] \ finalize:is-fullwidth-code-point: sill finalize C:\papa\00.default\12.Benesse\p\ Installing packages...[ ......] \ finalize:osenv: sill finalize C:\papa\00.default\12.Benesse\product-manage-site| Installing packages...[ ......] | finalize:safe-buffer: sill finalize C:\papa\00.default\12.Benesse\product-manag/ Installing packages...[ ......] \ finalize:strip-json-comments: sill finalize C:\papa\00.default\12.Benesse\produ- Installing packages...[ ......] \ finalize:are-we-there-yet: sill finalize C:\papa\00.default\12.Benesse\product-\ Installing packages...[ ......] / finalize:gauge: sill finalize C:\papa\00.default\12.Benesse\product-manage-site| Installing packages...[ ......] - finalize:glob: sill finalize C:\papa\00.default\12.Benesse\product-manage-site-/ Installing packages...[ ......] - finalize:fs-minipass: sill finalize C:\papa\00.default\12.Benesse\product-manag- Installing packages...[ ......] - finalize:nan: sill finalize C:\papa\00.default\12.Benesse\product-manage-site-f\ Installing packages...[ ......] - finalize:deep-extend: sill finalize C:\papa\00.default\12.Benesse\product-manag| Installing packages...[ ......] - finalize:minimatch: sill finalize C:\papa\00.default\12.Benesse\product-manage-/ Installing packages...[ ......] / finalize:object-assign: sill finalize C:\papa\00.default\12.Benesse\product-man- Installing packages...[ ......] \ finalize:process-nextick-args: sill finalize C:\papa\00.default\12.Benesse\prod\ Installing packages...[ ......] | finalize:sax: sill finalize C:\papa\00.default\12.Benesse\product-manage-site-f| Installing packages...[ ......] - finalize:semver: sill finalize C:\papa\00.default\12.Benesse\product-manage-sit/ Installing packages...[ ......] \ finalize:set-blocking: sill finalize C:\papa\00.default\12.Benesse\product-mana- Installing packages...[ ......] \ finalize:set-blocking: sill finalize C:\papa\00.default\12.Benesse\product-mana\ Installing packages...[ ......] \ finalize:set-blocking: sill finalize C:\papa\00.default\12.Benesse\product-mana| Installing packages...[ ......] \ finalize:set-blocking: sill finalize C:\papa\00.default\12.Benesse\product-mana/ Installing packages...[ ......] \ finalize:set-blocking: sill finalize C:\papa\00.default\12.Benesse\product-mana- Installing packages...[ ......] \ finalize:set-blocking: sill finalize C:\papa\00.default\12.Benesse\product-mana\ Installing packages...[ ......] \ finalize:set-blocking: sill finalize C:\papa\00.default\12.Benesse\product-mana| Installing packages...[ ......] \ finalize:set-blocking: sill finalize C:\papa\00.default\12.Benesse\product-mana/ Installing packages...[ ......] \ finalize:set-blocking: sill finalize C:\papa\00.default\12.Benesse\product-mana- Installing packages...[ ......] \ finalize:set-blocking: sill finalize C:\papa\00.default\12.Benesse\product-mana\ Installing packages...[ ......] \ finalize:set-blocking: sill finalize C:\papa\00.default\12.Benesse\product-mana| Installing packages...[ ......] | finalize:signal-exit: sill finalize C:\papa\00.default\12.Benesse\product-manag\ Installing packages...[ ......] - finalize:strip-ansi: sill finalize C:\papa\00.default\12.Benesse\product-manage/ Installing packages...[ ......] | finalize:strip-json-comments: sill finalize C:\papa\00.default\12.Benesse\produ- Installing packages...[ ......] | finalize:strip-json-comments: sill finalize C:\papa\00.default\12.Benesse\produ\ Installing packages...[ ......] | finalize:strip-json-comments: sill finalize C:\papa\00.default\12.Benesse\produ| Installing packages...[ ......] - finalize:gauge: sill finalize C:\papa\00.default\12.Benesse\product-manage-site/ Installing packages...[ ......] - finalize:inflight: sill finalize C:\papa\00.default\12.Benesse\product-manage-s- Installing packages...[ ......] \ finalize:fs-minipass: sill finalize C:\papa\00.default\12.Benesse\product-manag\ Installing packages...[ ......] - finalize:node-pre-gyp: sill finalize C:\papa\00.default\12.Benesse\product-mana| Installing packages...[ ......] \ finalize:fsevents: sill finalize C:\papa\00.default\12.Benesse\product-manage-s/ Installing packages...[ ......] / finalize:code-point-at: sill finalize C:\papa\00.default\12.Benesse\product-man- Installing packages...[ ......] - finalize:deep-extend: sill finalize C:\papa\00.default\12.Benesse\product-manag\ Installing packages...[ ......] - finalize:minimatch: sill finalize C:\papa\00.default\12.Benesse\product-manage-| Installing packages...[ ......] / finalize:npm-bundled: sill finalize C:\papa\00.default\12.Benesse\product-manag/ Installing packages...[ ......] / finalize:object-assign: sill finalize C:\papa\00.default\12.Benesse\product-man- Installing packages...[ ......] / finalize:nopt: sill finalize C:\papa\00.default\12.Benesse\product-manage-site-\ Installing packages...[ ......] - finalize:safer-buffer: sill finalize C:\papa\00.default\12.Benesse\product-mana| Installing packages...[ ......] - finalize:semver: sill finalize C:\papa\00.default\12.Benesse\product-manage-sit/ Installing packages...[ ......] | finalize:strip-json-comments: sill finalize C:\papa\00.default\12.Benesse\produ- Installing packages...[ ......] - finalize:util-deprecate: sill finalize C:\papa\00.default\12.Benesse\product-ma\ Installing packages...[ ......] / finalize:once: sill finalize C:\papa\00.default\12.Benesse\product-manage-site-| Installing packages...[ ......] | finalize:rimraf: sill finalize C:\papa\00.default\12.Benesse\product-manage-sit/ Installing packages...[ ......] / finalize:tar: sill finalize C:\papa\00.default\12.Benesse\product-manage-site-f- Installing packages...[ ......] - finalize:node-pre-gyp: sill finalize C:\papa\00.default\12.Benesse\product-mana- Installing packages...[ ......] / refresh-package-json:deep-extend: sill refresh-package-json C:\papa\00.default\\ Installing packages...[ ......] - refresh-package-json:safe-buffer: sill refresh-package-json C:\papa\00.default\| Installing packages...[ ......] - refresh-package-json:safe-buffer: sill refresh-package-json C:\papa\00.default\/ Installing packages...[ ......] - refresh-package-json:safe-buffer: sill refresh-package-json C:\papa\00.default\- Installing packages...[ ......] - refresh-package-json:safe-buffer: sill refresh-package-json C:\papa\00.default\\ Installing packages...[ ......] - refresh-package-json:safe-buffer: sill refresh-package-json C:\papa\00.default\/ Installing packages...[ .....] | postinstall:product-manage-site-for-hands-on: info lifecycle product-manage-sit\ Installing packages...[ ....] - prepare:product-manage-site-for-hands-on: info lifecycle product-manage-site-fo\ Installing packages...[ ....] / prepare:product-manage-site-for-hands-on: info lifecycle product-manage-site-fonpm WARN @angular-devkit/build-angular@0.803.22 requires a peer of @angular/compiler-cli@^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular-devkit/build-angular@0.803.22 requires a peer of typescript@>=3.1 < 3.6 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/webpack@8.3.22 requires a peer of @angular/compiler-cli@^8.0.0 but none is installed. You must install peer
dependencies yourself.
npm WARN @ngtools/webpack@8.3.22 requires a peer of typescript@>=3.4 < 3.6 but none is installed. You must install peer dependencies yourself.
npm WARN karma-jasmine-html-reporter@1.5.1 requires a peer of jasmine-core@>=3.5 but none is installed. You must install peer
dependencies yourself.
npm WARN ngx-translate-testing@3.0.0 requires a peer of @angular/common@^8.0.0-rc.0 || ^8.0.0 but none is installed. You must
install peer dependencies yourself.
npm WARN ngx-translate-testing@3.0.0 requires a peer of @angular/core@^8.0.0-rc.0 || ^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
/ Installing packages...WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\watchpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\karma\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
removed 1 package and audited 16850 packages in 54.761s
found 2 high severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
√ 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.
こちらも良い感じです。
脆弱性の警告が2件ほど出たもようなので、作業がひとしきり終わったら対応しようと思います（npm audit fix）
angular/cliのバージョンアップ
3番目にng update @angular/cli
ng update @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 38 dependencies.
Fetching dependency metadata from registry...
Updating package.json with dependency @angular/cli @ "9.0.2" (was "8.3.22")...
UPDATE package.json (1630 bytes)
√ Packages installed successfully.
** Executing migrations of package '@angular/cli' **
> Angular Workspace migration.
Update an Angular CLI workspace to version 9.
UPDATE angular.json (3915 bytes)
UPDATE tsconfig.app.json (272 bytes)
UPDATE package.json (1633 bytes)
√ Packages installed successfully.
Migration completed.
> Lazy loading syntax migration.
Update lazy loading syntax to use dynamic imports.
Migration completed.
> Replace deprecated 'styleext' and 'spec' Angular schematic options.
Migration completed.
こちらも問題なく上がりました。
脆弱性の修正
あとは先ほどの脆弱性をこちらのコマンドで修正します。
npm audit fix
npm audit fix
> core-js@3.6.0 postinstall C:\papa\00.default\12.Benesse\product-manage-site-for-hands-on\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
npm WARN karma-jasmine-html-reporter@1.5.1 requires a peer of jasmine-core@>=3.5 but none is installed. You must install peer
dependencies yourself.
npm WARN ngx-translate-testing@3.0.0 requires a peer of @angular/common@^8.0.0-rc.0 || ^8.0.0 but none is installed. You must
install peer dependencies yourself.
npm WARN ngx-translate-testing@3.0.0 requires a peer of @angular/core@^8.0.0-rc.0 || ^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@8.0.0 requires a peer of node-sass@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@8.0.0 requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-subresource-integrity@1.3.4 requires a peer of html-webpack-plugin@^2.21.0 || ~3 || >=4.0.0-alpha.2 <5 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\watchpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\karma\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ @angular-devkit/build-angular@0.900.2
added 196 packages from 108 contributors, removed 31 packages, updated 223 packages and moved 2 packages in 310.024s
fixed 2 of 2 vulnerabilities in 16850 scanned packages
2件の脆弱性は良い感じに修正できた模様です。
バージョン確認
ここでAngularのバージョンを確認してみます。
ng version
ng version
? 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. No
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 9.0.2
Node: 12.4.0
OS: win32 x64
Angular: 9.0.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.900.2
@angular-devkit/build-angular 0.900.2
@angular-devkit/build-optimizer 0.900.2
@angular-devkit/build-webpack 0.900.2
@angular-devkit/core 9.0.2
@angular-devkit/schematics 9.0.2
@angular/cdk 9.0.0
@angular/cli 9.0.2
@angular/material 9.0.0
@ngtools/webpack 9.0.2
@schematics/angular 9.0.2
@schematics/update 0.900.2
rxjs 6.5.4
typescript 3.7.5
webpack 4.41.2
良いですねぇ、ちゃんと 9 に上がってます。
レンダリングもIvyに変わったようです（Ivy Workspace: Yes）。
動作確認
起動の確認
では動くかどうか起動してみます。
ng serve --o s（起動コマンドです、少し省略してます）
ng serve --o s
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/animations : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/forms : 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/cdk/bidi : 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がいっぱい走りましたが、起動は問題なくできました。
Unitテストの確認
Unitテストは最初動かなかったです、下のような感じになりました。
このエラーは「hammerjs」によるもので「test.ts」でインポートしていたhammerjsを消すと治まりました。
下記の差分のような感じです。
これまでAngularのUnitテストはhammerjsに依存していましたが、今回のバージョンでそれをなくしたそうです。
そのため手動で「test.ts」からhammerjsのインポート文を消す必要があるようです。
https://github.com/angular/components/blob/master/guides/v9-hammerjs-migration.md
E2Eテストの確認
E2Eテストは問題なく動きました。
これで今日のミッション完了ですな✨
今日の感想
年末から年始にかけてずっとAngularとSpring Bootをさわっていたのですが、ブログに書く機会がなく、久しぶりの投稿になりました。
他に書きたいことがだいぶ溜まっているので忘れないうちに書かねばと思いました😎
余談になりますが、Unitテストの時に使う、#TestBed.get()メソッドがDeprecatedになっていました、ブログを書き終えた後に気づきました。
今後は#TestBed.inject()を使いましょうー。
では、本年もよろしくお願いします。
