
这是 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 专注于软件工程和生成式人工智能。在社交媒体上与他联系:X (@chuckconway) 或访问他的 YouTube。