ng updateでAngularをv7 -> v8にアップグレードする

はじめに
環境
出典元(公式サイトURL)
アップグレード
動作確認とエラーの解消
参考サイト

はじめに

趣味プロ中にAngular v8以上じゃないと使えない構文がでてきたので、Angularのバージョンを7から8にアップグレードすることにした。

Angular CLIで作成したプロジェクトなので、ng updateコマンドでアップグレードを実施することができる。

環境

アップグレード前のAngularプロジェクトのバージョン情報

$ ng version

Angular CLI: 7.3.9
Node: 8.11.3
OS: darwin x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.9
@angular-devkit/build-angular     0.13.9
@angular-devkit/build-optimizer   0.13.9
@angular-devkit/build-webpack     0.13.9
@angular-devkit/core              7.3.9
@angular-devkit/schematics        7.3.9
@angular/cdk                      7.3.7
@angular/cli                      7.3.9
@angular/fire                     5.2.3
@angular/material                 7.3.7
@ngtools/webpack                  7.3.9
@schematics/angular               7.3.9
@schematics/update                0.13.9
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0

出典元(公式サイトURL)

angular.jp

アップグレード

公式サイトの説明にしたがってng update @angular/cli @angular/coreコマンドを実行

$ ng update @angular/cli @angular/core

ng updateコマンドを実行した後に、ng versionコマンドを実行することで正常にアップグレードされていることを確認する

$ng version

Angular CLI: 7.3.6
Node: 8.11.3
OS: darwin 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.20
@angular-devkit/build-angular     0.803.20
@angular-devkit/build-optimizer   0.803.20
@angular-devkit/build-webpack     0.803.20
@angular-devkit/core              8.3.20
@angular-devkit/schematics        8.3.20
@angular/cdk                      7.3.7
@angular/cli                      8.3.20
@angular/fire                     5.2.3
@angular/material                 7.3.7
@ngtools/webpack                  8.3.20
@schematics/angular               8.3.20
@schematics/update                0.803.20
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.39.2

Angularの7から8へのアップグレードが正常に完了していることがわかる

動作確認とエラーの解消

続いて、アップグレードしたAngularプロジェクトをng serve --openコマンドでビルドしてみると、エラーが発生する。

$ ng serve --open
Schema validation failed with the following errors:
  Data path ".builders['app-shell']" should have required property 'class'.
Error: Schema validation failed with the following errors:
  Data path ".builders['app-shell']" should have required property 'class'.
    at MergeMapSubscriber._registry.compile.pipe.operators_1.concatMap.validatorResult [as project] (/usr/local/lib/node_modules/@angular/cli/node_modules/@angular-devkit/core/src/workspace/workspace.js:215:42)
    at MergeMapSubscriber._tryNext (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/operators/mergeMap.js:69:27)
    at MergeMapSubscriber._next (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/operators/mergeMap.js:59:18)
    at MergeMapSubscriber.Subscriber.next (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/Subscriber.js:67:18)
    at MergeMapSubscriber.notifyNext (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/operators/mergeMap.js:92:26)
    at InnerSubscriber._next (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/InnerSubscriber.js:28:21)
    at InnerSubscriber.Subscriber.next (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/Subscriber.js:67:18)
    at MapSubscriber._next (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/operators/map.js:55:26)
    at MapSubscriber.Subscriber.next (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/Subscriber.js:67:18)
    at SwitchMapSubscriber.notifyNext (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/operators/switchMap.js:86:26)
    at InnerSubscriber._next (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/InnerSubscriber.js:28:21)
    at InnerSubscriber.Subscriber.next (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/Subscriber.js:67:18)
    at /usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/util/subscribeTo.js:17:28
    at Object.subscribeToResult (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/util/subscribeToResult.js:10:45)
    at SwitchMapSubscriber._innerSub (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/operators/switchMap.js:65:54)
    at SwitchMapSubscriber._next (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/operators/switchMap.js:55:14)

上記のエラーだが、下記の手順で修正することができる。

package.jsonを開いて、"@angular-devkit/build-angular"のバージョンを"^0.800.0"から"~0.12.1"にする
node_modules/ディレクトリを配下ごと削除して、npm iコマンドでnpmパッケージをインストールする

上記の手順でエラーを解決してng serve --openコマンドを実行すると下記の別のエラーが発生する。

$ ng serve --open
Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(es5BrowserSupport).

上記のエラーについては下記の手順で解消することができる

angular.jsonファイルを開いて、"es5BrowserSupport": trueと書かれている行を削除する

上記の手順を実行すると全てのエラーが解消し、ビルドできるようになる

参考サイト

angular - Ionic problem: [ng]Schema validation failed with the following errors:[ng]Data path".builders['app-shell']"should have required property 'class' - Stack Overflow

angular - Schema validation failed with the following errors: Data path ".builders['app-shell']" should have required property 'class' - Stack Overflow

angular - Data path '''' should NOT have additional properties (es5BrowserSupport) - Stack Overflow

angular - Error: Schema validation failed with the following errors: Data path "" should NOT have additional properties(project) - Stack Overflow

Angular 日本語ドキュメンテーション

中安拓也のブログ

プログラミングについて書くブログ