Angular HomeComponent模板span意外闭合标签报错修复方法

报错是模板HTML标签嵌套不合法导致的，你贴出的代码片段存在两处问题：

• <del>标签内部混入了无意义的WordPress平台残留标签<pre wp-pre-tag-5=""></pre>，这类内容一般是从网页复制、爬取代码时被自动插入的垃圾内容，无任何业务作用
• 残留标签后的del闭合标签被错误转义，左尖括号<丢失，变成了lt;/del>，导致<del>标签没有正常闭合。Angular模板解析器会按严格的标签嵌套规则校验结构，会把del标签未闭合后的所有内容都识别为del标签内部内容，最终读取到</span>时判定标签层级不匹配，抛出意外闭合span标签的错误。

• 删除<del>60后面多余的<pre wp-pre-tag-5=""></pre>残留代码
• 将残缺的lt;/del>修正为正确的del闭合标签</del>

修复后的完整代码片段如下：

<div class="product-info">
  <h2 class="product-title h5 mb-0"><a href="#">Sleeve linen shirt</a></h2>
  <span class="price">
    <del>60</del>
    $50.10
  </span>
</div>

保存修改后重新运行Angular编译流程，该错误就会直接消除。

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