Angular でコンポーネントをライブラリ化するときは templateUrl・stylesUrl を使えない

Angular コンポーネントをライブラリ化し、利用するプロジェクト側で npm install して使えるようにした。しかし、そのコンポーネントを表示させようとしたらうまくいかず、コンソールに 404 エラーが出ていた。

いろいろ調べてみると、どうやらライブラリ化したコンポーネントのデコレータで使用していた templateUrl と stylesUrl が原因のようだった。

• 参考 : javascript - Angular2 Typescript app throws 404 on components when js extension not specified - Stack Overflow
• 参考 : Rails5.1.2でAngularを使うとtemplateUrlでエラーが出る - こんがりぃ … Rails との組み合わせにおける同様の問題の回避方法について。

  • templateUrlではなくtemplateに落とし込んで頑張ってレンダリングするっぽい。

• 参考 : Module path prefix is not used to resolve styleUrl or templateUrl with AoT · Issue #5056 · angular/angular-cli · GitHub

  • This is actually a "bug" in JIT. styleUrls and templateUrl are supposed to be relative only, both in AOT and JIT.

どうも JIT コンパイルのバグ由来のようだが、templateUrl と stylesUrl に記載されるパスは、必ず相対パスとして解釈されてしまうようだ。つまり、本来 npm install して導入した外部コンポーネントであれば、./node_modules/myLibrary/app/my-library.component.html のようなパスに実ファイルがあることになるのだが、templateUrl は起点パスを利用側のアプリのルートから考えてしまうため、 ./src/app/ の配下を探しにいってしまい、404 エラーとなっていたようだ。

ということで、どうするかというと、templateUrl と stylesUrl は使わず、template や styles というプロパティを使い、その中にテンプレートリテラルで HTML と CSS をベタ書きするしかない。