意外的结束标记“：svg：use”

Question

我是angularJS的新手，正在使用angular2创建应用程序。 运行应用程序时出现以下错误：

这是我的文件：

<ul class="social-links">
  <li>
    <a [href]="facebook" target="_blank">
      <svg width="12" height="26">
        <use xlink:href="../../../assets/images/sprite.svg#facebook"></use>
      </svg>
    </a>
  </li>
  <li>
    <a [href]="twitter" target="_blank">
      <svg width="20" height="17">
        <use xlink:href="../../../assets/images/sprite.svg#twitter"></use>
      </svg>
    </a>
  </li>
  <li>
    <a [href]="likedIn" target="_blank">
      <svg width="20" height="20">
        <use xlink:href="../../../assets/images/sprite.svg#linkedin"></use>
      </svg>
    </a>
  </li>
</ul>

意外的结束标记“：svg：use”。 当标签已经被另一个标签关闭时，可能会发生这种情况。 有关更多信息，请参见https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags（“ebook target = _blank> [ERROR->]

Answer 1

由于将HTML最小化而导致此错误。 在这种情况下，您可以自动关闭<use xlink:href="images/sprite.svg#icon"/>但是编译器很可能会<use xlink:href="images/sprite.svg#icon"/>处理另一个“意外关闭标签”问题。 要解决设置最小化为false。 此处的更多信息： https : //webpack.js.org/loaders/html-loader

module: {
  rules: [{
    test: /\.html$/,
    use: [ {
      loader: 'html-loader',
      options: {
        minimize: false
      }
    }],
  }]
}