Angular2项目运行报错：Unexpected closing tag ":svg:use" 求助

嘿，作为刚接触Angular 2的新手，碰到这个问题太正常了！你遇到的Unexpected closing tag ":svg:use"错误，本质是Angular 2的模板编译器对SVG原生标签的解析规则导致的——它把<use>误当成了自定义组件，而非原生SVG元素，所以对标签闭合方式的检查变得异常严格。

问题根源 #

你的代码里用了成对闭合的<use></use>写法：

<use xlink:href="../../../assets/images/sprite.svg#facebook"></use>

在普通HTML环境下这没问题，但Angular 2的模板解析器对SVG元素的处理有特殊逻辑，它会认为<use>这种非标准HTML标签需要遵循组件的闭合规则，从而抛出错误。

两种解决方案 #

方案1：使用自闭合标签（推荐）

SVG规范里<use>是允许自闭合的，Angular对自闭合的SVG原生标签解析更友好，直接改成这样：

<use xlink:href="../../../assets/images/sprite.svg#facebook" />

方案2：改用SVG2标准的href属性（适用于Angular 2+新版本）

SVG2已经废弃了xlink:href，改用原生的href属性，写法更简洁，同时也能避免Angular的解析问题：

<use href="../../../assets/images/sprite.svg#facebook" />

修正后的完整代码示例 #

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

额外提示 #

如果之后碰到其他SVG元素的类似错误，都可以尝试用自闭合标签的方式解决，Angular对SVG原生元素的自闭合写法兼容性更好。

内容的提问来源于stack exchange，提问作者Karan