angular v6にアップデートした際に起きたエラーの対応

いつものです〜

Local workspace file ('angular.json') could not be found.

$ yarn start
yarn run v1.3.2
$ ng serve --extract-css=true --proxy-config proxy.conf.json
Local workspace file ('angular.json') could not be found.
Error: Local workspacLocal workspace file ('angular.json') could not be found.e file ('angular.json') could not be found.
    at WorkspaceLoader._getProjectWorkspaceFilePath (/Users/tree/go/src/string-utility/node_modules/@angular/cli/models/workspace-loader.js:37:19)
    at WorkspaceLoader.loadWorkspace (/Users/tree/go/src/string-utility/node_modules/@angular/cli/models/workspace-loader.js:24:21)
    at ServeCommand._loadWorkspaceAndArchitect (/Users/tree/go/src/string-utility/node_modules/@angular/cli/models/architect-command.js:195:32)
    at ServeCommand.<anonymous> (/Users/tree/go/src/string-utility/node_modules/@angular/cli/models/architect-command.js:47:25)
    at Generator.next (<anonymous>)
    at /Users/tree/go/src/string-utility/node_modules/@angular/cli/models/architect-command.js:7:71
    at new Promise (<anonymous>)
    at __awaiter (/Users/tree/go/src/string-utility/node_modules/@angular/cli/models/architect-command.js:3:12)
    at ServeCommand.initialize (/Users/tree/go/src/string-utility/node_modules/@angular/cli/models/architect-command.js:46:16)
    at Object.<anonymous> (/Users/tree/go/src/string-utility/node_modules/@angular/cli/models/command-runner.js:87:23)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

angular v6になり、「.angular-cli.json」というファイルから「angular.json」に変更になり、jsonの構造も変わりました。

angular-cliのバージョンアップをする

$ brew upgrade angular-cli
==> Upgrading 1 outdated package, with result:
angular-cli 1.7.4 -> 6.0.0
==> Upgrading angular-cli
==> Downloading https://homebrew.bintray.com/bottles/angular-cli-6.0.0.high_sierra.bottle.tar.gz
######################################################################## 100.0%
==> Pouring angular-cli-6.0.0.high_sierra.bottle.tar.gz
🍺  /usr/local/Cellar/angular-cli/6.0.0: 6,652 files, 54.9MB

.angular-cli.json を angular.json に変換する

以下のupdateコマンドでマイグレーションしてくれました。

$ ng update @angular/cli

しかし、私の場合sourceRootは「client」としていたのですが、マイグレーション結果は「src」となってしまっていました。これは手動で「client」と修正しました。

  "projects": {
    "string-utility": {
      "root": "",
      "sourceRoot": "client",

angular/core, angular/material, rxjsのバージョンアップ

$ ng update @angular/core
$ ng update @angular/material
$ ng update rxjs

ng updateコマンドはpackage.jsonを更新するだけなので、別途node_modulesを最新化する必要があります。

$ ng update rxjs
UPDATE package.json (2795 bytes)

import { Observable } from 'rxjs/Observable'; がコンパイルエラー

rxjs v6には破壊的変更が入ったため、以下のようにimportを変更する必要があります。

import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators/map';
import "rxjs/add/observable/of";
↓
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';

このimport変更をしたくない方は、「rxjs-compat」を追加する事でimportの変更無しに済ませる事ができます。

$ yarn add rxjs-compat

TS2322: Type 'Store<string>' is not assignable to type 'Observable<string>'.

ERROR in client/app/app.component.ts(71,5): error TS2322: Type 'Store<boolean>' is not assignable to type 'Observable<boolean>'.

こんなコンパイルエラーが発生しました。以下のようにrxjs-compatを追加する事でコンパイルエラーが解消されました。

$ yarn add rxjs-compat

この記事を書いているタイミングでは@ngrx/storeのバージョンは「v5.2.0」で、v6はまだ出ておらず、v6.0.0-beta2が最新でした。

恐らくこれがv6になれば、rxjs-compatは不要になるのではないかと思われます。

Unknown option: '--extractCss'

Unknown option: '--sourcemaps'

これ系のエラーですが、今までngコマンドのオプションはキャメルケースだったのですが、v6からケバブケースに変更されたようです。

cliオプションで指定する場合はケバブケースで、angular.jsonで指定する場合はキャメルケースになったようです。

cli	angular.json
--optimization	optimization
--output-hashing	outputHashing
--source-map	sourceMap
--extract-css	extractCss
--named-chunks	namedChunks
--aot	aot
--extract-licenses	extractLicenses
--vendor-chunk	vendorChunk
--build-optimizer	buildOptimizer
--service-worker	serviceWorker
--ngsw-config-path	ngswConfigPath

何も考えずにマイグレーションするとangular.json側にも設定があるし、package.jsonのngコマンドにも設定があるという重複状態になるので、どちらかに寄せた方が良さそうですね。

Configuration 'true' could not be found in project 'string-utility'.

$ ng build -vc=true
Configuration 'true' could not be found in project 'string-utility'.
Error: Configuration 'true' could not be found in project 'string-utility'.
    at Architect.getBuilderConfiguration (/Users/tree/go/src/string-utility/node_modules/@angular-devkit/architect/src/architect.js:106:23)
    at runSingleTarget (/Users/tree/go/src/string-utility/node_modules/@angular/cli/models/architect-command.js:138:89)
    at MergeMapSubscriber.rxjs_2.from.pipe.operators_1.concatMap.project (/Users/tree/go/src/string-utility/node_modules/@angular/cli/models/architect-command.js:143:127)
    at MergeMapSubscriber._tryNext (/Users/tree/go/src/string-utility/node_modules/rxjs/internal/operators/mergeMap.js:122:27)
    at MergeMapSubscriber._next (/Users/tree/go/src/string-utility/node_modules/rxjs/internal/operators/mergeMap.js:112:18)
    at MergeMapSubscriber.Subscriber.next (/Users/tree/go/src/string-utility/node_modules/rxjs/internal/Subscriber.js:103:18)
    at Observable._subscribe (/Users/tree/go/src/string-utility/node_modules/rxjs/internal/util/subscribeToArray.js:9:20)
    at Observable._trySubscribe (/Users/tree/go/src/string-utility/node_modules/rxjs/internal/Observable.js:177:25)
    at Observable.subscribe (/Users/tree/go/src/string-utility/node_modules/rxjs/internal/Observable.js:162:93)
    at MergeMapOperator.call (/Users/tree/go/src/string-utility/node_modules/rxjs/internal/operators/mergeMap.js:87:23)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

これ、ちょっと意味不明なエラーだったのですが、以下のように -vc を削除すると解消しました。（-vcって何のオプションだっけ・・・）

$ ng build --prod -vc=true
↓
$ ng build --prod

xxx.bundle.js is not found

詳細は調べきれていませんが、今まで ng build --prod すると、xxx.bundle.js と出力されていたのが、 xxx.js となったようです。

vendor.bundle.js is not found

ng serveした時はあるのに、ng build --prodすると無くなってました。

以下のようにproduction設定のvendorChunkをtrueにするとvendor.jsが生成されるようになります。

{
  "projects": {
    "string-utility": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "vendorChunk": true
            }
          }
        }
      }
    }
  }
}

inline.bundle.js is not found

これは inline.js にすればよいのではなく、ファイル名が「inline.js」から「runtime.js」に変わったようです。

この辺をまとめると以下となります。

<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.js"></script>
↓
<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="styles.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="main.js"></script>