Unexpected closing tag “:svg:use”

Question

I am new in angularJS and creating app using angular2. I am getting the below error while running the app:

This is my file:

<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>

Unexpected closing tag ":svg:use". 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 ("ebook target=_blank> [ERROR ->]

Answer 1

This error results from HTML being minimized. In this case you can self-close the <use xlink:href="images/sprite.svg#icon"/> but the compiler would likely pickup on another 'Unexpected closing tag' issue down the line. To resolve set minimize to false. More info here: https://webpack.js.org/loaders/html-loader

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