Angular 中"模板解析错误"的解决方案

这是 Angular 2/4/+ 中比较令人沮丧的问题之一。严格来说，这不是 Angular 2/4/+ 本身的问题，而是 webpack 如何打包支持 HTML 文件的问题。

当你使用生产标志运行 webpack (webpack -p) 时会出现此问题。编译完成，但运行该网站会生成运行时错误：模板解析错误

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
      }
    }
  ]
},