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

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

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

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

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