Skip to content

投稿

AngularでのTemplate parse errorsの回避方法

2017年10月30日 • 3分で読める

AngularでのTemplate parse errorsの回避方法

これはAngular 2/4/+で最も苛立たしい問題の一つでした。これは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-loaderを更新するだけで簡単です。

変更前:

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

変更後:

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

著者:Chuck Conwayはソフトウェアエンジニアリングと生成AIを専門としています。ソーシャルメディアで彼とつながりましょう:X (@chuckconway) または YouTube をご覧ください。

↑ トップに戻る

こちらもおすすめ