
これは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 をご覧ください。