Angular-cli "ERROR in Error encountered resolving symbol values stativally, Calling function 'XXXX' ....." なにそれおいしいの

はじめに

typescriptをgulp使ってトランスパイルしてたけど、Angular-cliでコンパイルしたほうがWebpack使ってbundle作ってくれるから便利じゃん。

って思って移行した際、gulpなら問題なかったんだけど、Angular-cliでエラーが出て時間を費やした話。

エラー文

ERROR in Error encountered resolving symbol values statically. Calling function 'XXXX', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol YYYY in [PATH]....

対象

よくわからないが、AoTだとうまくいかない問題はGitでissueに登録されている内容。(Angular5.Xなら動くみたいな意見もある)

でも僕はAngular 4.X で動かしたいの！って人向けの記事。

環境

• Angular 4.X
• Webpack 3.X
• Webpack-dev-server 2.X

Angular-cliで作成したプロジェクトに対し

npm eject

で、webpackを吐かせた状態。

今回のツボ

Angular-cli AoTのバグ回避方法

状態

JiT ( webpack-dev-server ) で行った際、最初Errorが出るが、適当なファイルで保存すると自動更新がかかる。その際、なにも変更してないのにComplete!とか出る訳の分からないバグ。

同じプロジェクトをAoT( webpack )でローカルにbundle欲しいから実行すると、まぁ1回目だからエラーで動かなくて何も排出されない。

回避方法

結論 : JiTで出せればいい。

webpack-dev-serverを使うと、メモリ上にbundleが生成されるため、拾えない。 だから、webpackでWatchしてやればいい。

package.jsonに追記

scriptsのところに追加してやりましょう

"scripts":{
  "watch": "webpack --watch --config webpack.config.js ",
}

これでコマンドで

npm watch

で実行。1回目エラーだけど、適当なファイルで保存更新すれば、webpack.config.jsに指定したoutputファイルに出るでしょう。

結論

なんかうーんって感じだけど、出力したい！は達成できた。

バイン！