Webページの見た目とかを試行錯誤していくのに、生のHTMLだと閉じタグの面倒みるのが手間なのでPUG(旧Jude)を好んで使っている。
Angular CLIでもテンプレートにPUGを使いたいという要望はあるけど、内部のWebpackの設定を書き換えるという荒業(?)を実現してくれるng-cli-pug-loaderが公開されている。
ng add ng-cli-pug-loaderでインストールでき、npmでインストール後のタイミングでng-add-pug-loader.jsが実行され、上記設定書き換えが行われる。
これで、例えばapp.component.htmlも
//The content below is only a placeholder and can be replaced.
div(style='text-align:center')
h1
| Welcome to {{ title }}!
img(width='300', alt='Angular Logo', src='...割愛...')
h2 Here are some links to help you start:
ul
li
h2
a(target='_blank', rel='noopener', href='https://angular.io/tutorial') Tour of Heroes
li
h2
a(target='_blank', rel='noopener', href='https://angular.io/cli') CLI Documentation
li
h2
a(target='_blank', rel='noopener', href='https://blog.angular.io/') Angular blog
な感じに書ける。これはHTML2Jadeを使って変換したやつで、既存のHTMLとかかでも簡単に移行できる。あとはng g componentで生成されるテンプレートが最初からpugになると更に嬉しいかんじです。
ところが
昨日はうまく動いていたAngularアプリが、朝にnpm startで起動してブラウザでアクセスると何も画面が表示されず、コンソールには以下のエラーが出力されていた。
ERROR in : 'module' is not a known element:
1. If 'module' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
最初はなんのことかさっぱりだったけど、そう言えば昨日、GraphQLクライアントをng add apollo-angularでインストールしてたことを思い出した。その時はnpm startしたまま作業を続けていて、それだと問題が発生しない現象なのかもしれない。
この時の主なモジュールのバージョンは以下の通り。
| モジュール | バージョン |
|---|---|
| nodejs | 10.16.0 |
| @angular/cli | 8.0.3 |
| ng-cli-pug-loader | 0.2.0 |
| apollo-angular | 1.6.0 |
調べてみた
結論として、Webpackの設定ファイルがおかしな状態になっていた。
- ng add ng-cli-pug-loader直後
309: rules: [
310: { test: /\.(pug|jade)$/, exclude: /\.(include|partial)\.(pug|jade)$/, use: [ { loader: "apply-loader" }, { loader: "pug-loader" } ] }, { test: /\.(include|partial)\.(pug|jade)$/, loader: "pug-loader" },
- ng add ng-cli-pug-loader → ng add apollo-angular直後
309: rules: [ { test: /.(pug|jade)$/, exclude: /.(include|partial).(pug|jade)$/, use: [ { loader: "apply-loader" }, { loader: "pug-loader" } ] }, { test: /.(include|partial).(pug|jade)$/, loader: "pug-loader" },
310: { test: /\.(pug|jade)$/, exclude: /\.(include|partial)\.(pug|jade)$/, use: [ { loader: "apply-loader" }, { loader: "pug-loader" } ] }, { test: /\.(include|partial)\.(pug|jade)$/, loader: "pug-loader" },
本来の定義の前に、エスケープ文字が取り除かれた定義が追加されていた。
これを元に戻すことでエラーは解消された。
うろ覚えだけどAngular Materialもng add @angular/materialで追加した時にも同じようなエラーに遭遇した気がするので、同じ原因なのかもしれない。
さらに誰がこれを引き起こしているのか追求してみたいところだが、まずはここまでで満足しておきます。