angular-seedで@ngrx/storeを使う時に発生するエラーの回避方法

@ngrx/storeはangularの状態をいわゆるredux的に管理できるようにしてくれる便利なツール。今回angular-seed環境で開発しているangularアプリに@ngrx/storeを導入した時に発生したエラーの回避策について書いておく。

ビルド時（実装時）

@ngrx/store　を読み込んだファイルのビルドを走らせると、以下のようなエラーが発生。

localhost/:62
SyntaxError: Unexpected token <
    at eval (<anonymous>)
    at evaluate (http://localhost:5555/node_modules/systemjs/dist/system.src.js?1507880419240:2821:16)
    at http://localhost:5555/node_modules/systemjs/dist/system.src.js?1507880419240:3620:21
    at dynamicExecute (http://localhost:5555/node_modules/systemjs/dist/system.src.js?1507880419240:1144:26)
    at doEvaluate (http://localhost:5555/node_modules/systemjs/dist/system.src.js?1507880419240:1091:13)
    at ensureEvaluate (http://localhost:5555/node_modules/systemjs/dist/system.src.js?1507880419240:999:13)
    at http://localhost:5555/node_modules/systemjs/dist/system.src.js?1507880419240:1017:20
    at Object.eval (http://localhost:5555/app/app.module.js:14:15)
    at eval (http://localhost:5555/app/app.module.js:65:4)
    at eval (http://localhost:5555/app/app.module.js:66:3) Not expecting this error? Report it at https://github.com/mgechev/angular-seed/issuese

tools/config/projct.config.tsの中のadditionalPackagesの配列に以下を追加する。

  let additionalPackages: ExtendPackages[] = [

    ...

    {
      name: '@ngrx/store',
      path: 'node_modules/@ngrx/store/bundles/store.umd.js'
    },
  ],

参考

• https://github.com/mgechev/angular-seed/issues/457#issuecomment-287374671

テスト実行時

テストコードを書く時も同様。何も設定せずにテストを実行すると以下のようなエラーが出る。

26 10 2017 15:15:35.117:WARN [web-server]: 404: /base/node_modules/@ngrx/store/bundles/store.umd.js
Chrome 61.0.3163 (Mac OS X 10.12.6) ERROR: 'Error: Fetch error: 404 Not Found
    at http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?aebe9c95220342ad600bf928e092893ef1e9c861:1478:13
    at ZoneDelegate.invoke (http://localhost:9876/base/node_modules/zone.js/dist/zone.js?082dc1d83c7a42ddda9b652319d281eef1d450d5:391:26)
    at Zone.run (http://localhost:9876/base/node_modules/zone.js/dist/zone.js?082dc1d83c7a42ddda9b652319d281eef1d450d5:141:43)
    at http://localhost:9876/base/node_modules/zone.js/dist/zone.js?082dc1d83c7a42ddda9b652319d281eef1d450d5:818:57
    at ZoneDelegate.invokeTask (http://localhost:9876/base/node_modules/zone.js/dist/zone.js?082dc1d83c7a42ddda9b652319d281eef1d450d5:424:31)
    at Zone.runTask (http://localhost:9876/base/node_modules/zone.js/dist/zone.js?082dc1d83c7a42ddda9b652319d281eef1d450d5:191:47)
    at drainMicroTaskQueue (http://localhost:9876/base/node_modules/zone.js/dist/zone.js?082dc1d83c7a42ddda9b652319d281eef1d450d5:584:35)
    at <anonymous>'

Karma.conf.jsの中のfilesの配列に以下を追加する。

  files: [

    ...

    // @ngrx/store
    {
      pattern: 'node_modules/@ngrx/store/bundles/store.umd.js',
      watched: true,
      included: false,
    },
  ],

まとめ

とりあえず、この2つの設定をしておけば、今の所他にエラーは出ていない。他に問題が発生した場合は、追記していく。