$yanutetsu->{blog}

プログラマ三大美徳なPM

version up from Angular 7 to 8

やぬてつです。 この記事は Angular 利用している人(自分)をターゲットにしています。

スーパー良いタイミングだったので Angular のバージョンをあげることになりました。機能実装に忙しくてあまりバージョン管理ができていない今日この頃ですが、ジャストタイミングだったのでこの機会にがっつりバージョンをあげてしまいたいと思います!

まずは公式ドキュメントを読んでバージョンアップの流れをつかみます。 https://update.angular.io/

Angular Version は 7.2 から 8.0 を選択

App Complexity は Basic かな?

Other Dependencies で I use Angular Material の欄にチェックを入れます

Package Manager に npm を選択します。

これで Show me how to update! をクリック!

すると手順が表示されますので、これに従ってアップデート作業を行なっていきます。(めっちゃ便利ですね)

公式ドキュメントに従ってコマンドを叩いてみた

(*'-') < ng update @angular/core
                  Package "@angular/cdk" has an incompatible peer dependency to "@angular/common" (requires ">=6.0.0-beta.0 <7.0.0" (extended), would install "8.0.0").
                  Package "codelyzer" has an incompatible peer dependency to "@angular/compiler" (requires ">=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0" (extended), would install "8.0.0").
                  Package "codelyzer" has an incompatible peer dependency to "@angular/core" (requires ">=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0" (extended), would install "8.0.0").
Incompatible peer dependencies found. See above.

なんかワーニングだかエラーだかどてますね... git diff で package.json を確認しても更新されていないようです。(むむっ

なんやかんやで 使ったコマンド

(*'-') < ng update @angular/core --force

                  Package "codelyzer" has an incompatible peer dependency to "@angular/compiler" (requires ">=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0" (extended), would install "8.0.0").
                  Package "@angular/cdk" has an incompatible peer dependency to "@angular/common" (requires ">=6.0.0-beta.0 <7.0.0" (extended), would install "8.0.0").
                  Package "codelyzer" has an incompatible peer dependency to "@angular/core" (requires ">=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0" (extended), would install "8.0.0").
    Updating package.json with dependency @angular/compiler-cli @ "8.0.0" (was "7.2.15")...
    Updating package.json with dependency @angular/language-service @ "8.0.0" (was "7.2.15")...
    Updating package.json with dependency @angular/animations @ "8.0.0" (was "7.2.15")...
    Updating package.json with dependency @angular/compiler @ "8.0.0" (was "7.2.15")...
    Updating package.json with dependency @angular/common @ "8.0.0" (was "7.2.15")...
    Updating package.json with dependency @angular/forms @ "8.0.0" (was "7.2.15")...
    Updating package.json with dependency @angular/core @ "8.0.0" (was "7.2.15")...
    Updating package.json with dependency zone.js @ "0.9.1" (was "0.8.29")...
    Updating package.json with dependency @angular/platform-browser-dynamic @ "8.0.0" (was "7.2.15")...
    Updating package.json with dependency @angular/router @ "8.0.0" (was "7.2.15")...
    Updating package.json with dependency @angular/platform-browser @ "8.0.0" (was "7.2.15")...
    Updating package.json with dependency rxjs @ "6.5.2" (was "6.3.3")...
UPDATE package.json (1544 bytes)
npm WARN @angular/cdk@6.4.7 requires a peer of @angular/core@>=6.0.0-beta.0 <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/cdk@6.4.7 requires a peer of @angular/common@>=6.0.0-beta.0 <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/http@7.2.15 requires a peer of @angular/core@7.2.15 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/http@7.2.15 requires a peer of @angular/platform-browser@7.2.15 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/material@6.4.7 requires a peer of @angular/core@>=6.0.0-beta.0 <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/material@6.4.7 requires a peer of @angular/common@>=6.0.0-beta.0 <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/webpack@7.3.9 requires a peer of @angular/compiler-cli@>=5.0.0 <8.0.0 || ^7.0.0-beta.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/webpack@7.3.9 requires a peer of typescript@>=2.4.0 < 3.3 but none is installed. You must install peer dependencies yourself.
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN angular-in-memory-web-api@0.6.1 requires a peer of @angular/common@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angular-in-memory-web-api@0.6.1 requires a peer of @angular/core@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angular-in-memory-web-api@0.6.1 requires a peer of @angular/http@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN codelyzer@4.3.0 requires a peer of @angular/compiler@>=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN codelyzer@4.3.0 requires a peer of @angular/core@>=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ng-pick-datetime@7.0.0 requires a peer of @angular/cdk@^7.0.0 but none is installed. You must install peer dependencies yourself.

added 23 packages from 11 contributors, removed 77 packages, updated 20 packages and audited 42599 packages in 37.471s
found 0 vulnerabilities

            ------ Static Query Migration ------
            With Angular version 8, developers need to
            explicitly specify the timing of ViewChild and
            ContentChild queries. Read more about this here:
            https://v8.angular.io/guide/static-query-migration
            ------------------------------------------------


UPDATE src/app/present-box/present-box.component.ts (11942 bytes)
UPDATE src/app/user-list/user-list.component.ts (874 bytes)
UPDATE src/app/user-info/user-info.component.ts (1856 bytes)

しかも自動で ViewChild のところも直してくれる!(すごっ アップデート手順ドキュメントを読んでいるときはこれを自分で修正しなければいけないのか〜って思ってたんでマジ神です!

え!そんな便利コマンドあるの?って感じでもう一度 update コマンドを実行

(*'-') < ng update --all --force
                  Package "ng-pick-datetime" has an incompatible peer dependency to "@angular/cdk" (requires "^7.0.0", would install "8.0.0").
                  Package "angular-in-memory-web-api" has an incompatible peer dependency to "@angular/common" (requires ">=6.0.0 <8.0.0", would install "8.0.0")
                  Package "@angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=3.1 < 3.5", would install "3.5.1")
                  Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.1").
    Updating package.json with dependency jasmine-core @ "3.4.0" (was "2.99.1")...
    Updating package.json with dependency karma-jasmine-html-reporter @ "1.4.2" (was "0.2.2")...
    Updating package.json with dependency karma-jasmine @ "2.0.1" (was "1.1.2")...
    Updating package.json with dependency codelyzer @ "5.0.1" (was "4.3.0")...
    Updating package.json with dependency @types/jasmine @ "3.3.13" (was "2.8.16")...
    Updating package.json with dependency @angular/cdk @ "8.0.0" (was "6.4.7")...
    Updating package.json with dependency tslint @ "5.17.0" (was "5.11.0")...
    Updating package.json with dependency @angular/material @ "8.0.0" (was "6.4.7")...
    Updating package.json with dependency @types/gapi.auth2 @ "0.0.50" (was "0.0.48")...
    Updating package.json with dependency ts-node @ "8.2.0" (was "7.0.1")...
    Updating package.json with dependency angular-in-memory-web-api @ "0.8.0" (was "0.6.1")...
    Updating package.json with dependency core-js @ "3.1.3" (was "2.6.5")...
    Updating package.json with dependency @angular-devkit/build-angular @ "0.800.1" (was "0.13.9")...
    Updating package.json with dependency @angular/cli @ "8.0.1" (was "7.3.9")...
    Updating package.json with dependency @types/node @ "12.0.4" (was "8.9.5")...
    Updating package.json with dependency typescript @ "3.5.1" (was "3.4.5")...
UPDATE package.json (1545 bytes)

> core-js@2.6.9 postinstall /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/node_modules/babel-runtime/node_modules/core-js
> node scripts/postinstall || echo "ignore"


> core-js@2.6.9 postinstall /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/node_modules/karma/node_modules/core-js
> node scripts/postinstall || echo "ignore"


> @angular/cli@8.0.1 postinstall /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/node_modules/@angular/cli
> node ./bin/postinstall/script.js


> core-js@3.1.3 postinstall /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/node_modules/core-js
> node scripts/postinstall || echo "ignore"

npm WARN @angular/compiler-cli@8.0.0 requires a peer of typescript@>=3.4 <3.5 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/http@7.2.15 requires a peer of @angular/core@7.2.15 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/http@7.2.15 requires a peer of @angular/platform-browser@7.2.15 but none is installed. You must install peer dependencies yourself.
npm WARN ng-pick-datetime@7.0.0 requires a peer of @angular/cdk@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angular-in-memory-web-api@0.8.0 requires a peer of @angular/common@>=6.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angular-in-memory-web-api@0.8.0 requires a peer of @angular/core@>=6.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular-devkit/build-angular@0.800.1 requires a peer of typescript@>=3.1 < 3.5 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/webpack@8.0.1 requires a peer of typescript@>=3.4 < 3.5 but none is installed. You must install peer dependencies yourself.
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.

added 70 packages from 47 contributors, removed 123 packages, updated 130 packages, moved 11 packages and audited 19021 packages in 94.447s
found 0 vulnerabilities

    ** Executing migrations for package '@angular/cli' **
DELETE src/browserslist
CREATE browserslist (388 bytes)
UPDATE tslint.json (2857 bytes)
UPDATE package.json (1514 bytes)
UPDATE src/polyfills.ts (3266 bytes)
UPDATE tsconfig.json (411 bytes)
UPDATE src/tsconfig.app.json (166 bytes)
UPDATE src/tsconfig.spec.json (256 bytes)
npm WARN @angular-devkit/build-angular@0.800.1 requires a peer of typescript@>=3.1 < 3.5 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/compiler-cli@8.0.0 requires a peer of typescript@>=3.4 <3.5 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/webpack@8.0.1 requires a peer of typescript@>=3.4 < 3.5 but none is installed. You must install peer dependencies yourself.
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN angular-in-memory-web-api@0.8.0 requires a peer of @angular/common@>=6.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angular-in-memory-web-api@0.8.0 requires a peer of @angular/core@>=6.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ng-pick-datetime@7.0.0 requires a peer of @angular/cdk@^7.0.0 but none is installed. You must install peer dependencies yourself.

removed 1 package and audited 19019 packages in 11.22s
found 0 vulnerabilities

    ** Executing migrations for package '@angular/material' **
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/add-items-dialog/add-items-dialog.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/add-user-dialog/add-user-dialog.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/ban-user-dialog/ban-user-dialog.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/battle-divert-user-list/battle-divert-user-list.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/battle-history/battle-history.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/confirm-dialog/confirm-dialog.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/currency-info/currency-info.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/currency-purchase-list/currency-purchase-list.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/gacha-detail-log-dialog/gacha-detail-log-dialog.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/gacha-log-list/gacha-log-list.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/input-number-dialog/input-number-dialog.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/present-box/present-box.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/system-configs/system-configs.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/user-add-samples-dialog/user-add-samples-dialog.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/user-add-samples-menu/user-add-samples-menu.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/user-detail/user-detail.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/user-list/user-list.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/user-ranking/user-ranking.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/user-search/user-search.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/user-server-time/user-server-time.component.ts
            Fixed 1 error(s) in /Users/syanuma/go/src/github.com/QuatroA/OrientServer/admin/src/app/app.module.ts

  ✓  Angular Material update complete

  ⚠  Please check the output above for any issues that were detected but could not be automatically fixed.

  ✓  Angular Material update complete

  ⚠  Please check the output above for any issues that were detected but could not be automatically fixed.
    ** Executing migrations for package '@angular/cdk' **

  ✓  Angular CDK update complete

  ⚠  Please check the output above for any issues that were detected but could not be automatically fixed.

  ✓  Angular CDK update complete

  ⚠  Please check the output above for any issues that were detected but could not be automatically fixed.

これでコマンドとしては完了かな?

Angular Material 関連の import 文も自動で変更してくれた!マジ神!

今回 Lazy Loading は利用していないので、手順にあるアップデート作業はこれで終わりかな?

まとめ

Agnular 7 から 8 へのアップデートはとても親切でともてスムーズでした。めんどくさくならないうちにシュッてやってしまった方が良いかもです。