いつものです〜
- Local workspace file ('angular.json') could not be found.
- import { Observable } from 'rxjs/Observable'; がコンパイルエラー
- TS2322: Type 'Store<string>' is not assignable to type 'Observable<string>'.
- Unknown option: '--extractCss'
- Unknown option: '--sourcemaps'
- Configuration 'true' could not be found in project 'string-utility'.
- xxx.bundle.js is not found
- vendor.bundle.js is not found
- inline.bundle.js is not found
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」に変わったようです。
この辺をまとめると以下となります。
<scripttype="text/javascript"src="inline.bundle.js"></script><scripttype="text/javascript"src="polyfills.bundle.js"></script><scripttype="text/javascript"src="styles.bundle.js"></script><scripttype="text/javascript"src="vendor.bundle.js"></script><scripttype="text/javascript"src="main.js"></script>↓ <scripttype="text/javascript"src="runtime.js"></script><scripttype="text/javascript"src="polyfills.js"></script><scripttype="text/javascript"src="styles.js"></script><scripttype="text/javascript"src="vendor.js"></script><scripttype="text/javascript"src="main.js"></script>
![sillictor コンプレッション トップス メンズ 長袖 パワーストレッチ アンダー シャツ コンプレッション ウェア [UVカット + 吸汗速乾] 323bb二枚セット XL](http://m.media-amazon.com/images/I/41YoAm619RL.jpg "sillictor コンプレッション トップス メンズ 長袖 パワーストレッチ アンダー シャツ コンプレッション ウェア [UVカット + 吸汗速乾] 323bb二枚セット XL")
