Angular の「Template parse errors」の回避策

これは Angular 2/4/+ の最も厄介な問題の 1 つでした。Angular 2/4/+ 自体の問題ではなく、webpack がサポート HTML ファイルをバンドルする方法の問題です。

この問題は、webpack を本番フラグ (webpack -p) で実行するときに発生します。コンパイルは完了しますが、サイトを実行するとランタイムエラーが生成されます：Template parse errors

Uncaught Error: Template parse errors:  
Unexpected closing tag "a". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (" Home

4. [AMS\[ERROR ->\]](/ams/#/search)
5. [ Logout</a"): ng:///e/e.html@0:557 Unexpected closing tag "a". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("MS](/ams/#/logout)
6. [ Logout\[ERROR ->\]](/ams/#/logout)

疑わしい HTML：

<div class="navbar navbar-light bg-faded rounded navbar-toggleable-md"><div class="collapse navbar-collapse" id="containernavbar"> <global-search></global-search>- <a class="nav-link" routerlink="['']"> Home</a>
- [AMS](/ams/#/search)
- [ Logout](/ams/#/logout)

</div></div>

この HTML に何も問題が見つかりませんでした。複数のオンライン HTML バリデーターで実行しましたが、HTML は常に有効な HTML として返されました。数週間頭を悩ませた後、この問題を回避する方法があるはずだと気づきました。

GitHub のスレッド経由で発見したもの（申し訳ありませんが、リンクを失いました）は、HTML を最小化しようとしている HTML ローダーが問題を引き起こしているということでした。HTML の最小化がオフになっていれば、この問題は消えます。公平に言うと、このエラーを持つほとんどの人は無効な HTML を持っていました。この問題を回避する前に HTML をチェックすることをお勧めします。問題を先延ばしにしているだけかもしれません。

HTML の最小化をオフにするのは、webpack.config.js の HTML ローダーを更新するのと同じくらい簡単です。

変更前：

{
  test: /.html$/,
  loader: 'html-loader'
},

変更後：

{
  test: /.html$/,
  use: [
    {
      loader: 'html-loader',
      options: {
        minimize: false,
        removeComments: false,
        collapseWhitespace: false,
        removeAttributeQuotes: false
      }
    }
  ]
},