意外的結束標記“：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
      }
    }],
  }]
}