Skip to content

文章

Angular 中 'Template parse errors;' 的解决方案

2017年10月30日 • 2 分钟阅读

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

↑ 回到顶部

您可能还喜欢