Angular2 模板解析器在 W3C 验证的 HTML 片段上失败答案

【问题标题】：Angular2 template parser failing on W3C validated HTML fragmentAngular2 模板解析器在 W3C 验证的 HTML 片段上失败
【发布时间】：2017-04-11 23:34:36
【问题描述】：

以下文档在在线 W3C 验证器中解析成功：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <ul>
      <li><div style="margin: 0px 0px 1em; padding: 5px; border: 0px; font-size: 13px; width: auto; max-height: 600px; overflow: auto; font-family: Consolas, Menlo, Monaco, &quot;Lucida Console&quot;, &quot;Liberation Mono&quot;, &quot;DejaVu Sans Mono&quot;, &quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, monospace, sans-serif; display: block; color: rgb(57, 51, 24); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(239, 240, 241);">\noindent\makebox[\textwidth]{\includegraphics[width=\paperwidth]{...}}</div>
      </li>
    </ul>
  </body>
</html>

但以下片段在合并为 Angular2 模板时会导致 TemplateParser 失败：

<main>
    <ul>
      <li><div style="margin: 0px 0px 1em; padding: 5px; border: 0px; font-size: 13px; width: auto; max-height: 600px; overflow: auto; font-family: Consolas, Menlo, Monaco, &quot;Lucida Console&quot;, &quot;Liberation Mono&quot;, &quot;DejaVu Sans Mono&quot;, &quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, monospace, sans-serif; display: block; color: rgb(57, 51, 24); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(239, 240, 241);">\noindent\makebox[\textwidth]{\includegraphics[width=\paperwidth]{...}}</div>
      </li>
    </ul>
</main>

在最初的用法中，有问题的节几乎在文档片段/模板的末尾。错误输出为：

zone.js:388 Unhandled Promise rejection: Template parse errors:
Unexpected closing tag "li" (": rgb(239, 240, 241);">\noindent\makebox[\textwidth]{\includegraphics[width=\paperwidth]{...}}</div>[ERROR ->]</li><li><span style="font-size: 13px;"><span style="font-family: Consolas, Menlo, Monaco, &quot;Luci"): TechnicalNotesComponent@11:10412
Unexpected closing tag "ul" (": rgb(239, 240, 241);"><span style="color: rgb(195, 24, 24);"><br/></span></span></span></span></li>[ERROR ->]</ul></li></ul><div><span style="font-family: monospace, Courier;"><span style="color: rgb(0, 128, 0)"): TechnicalNotesComponent@11:11267
Unexpected closing tag "li" ("(239, 240, 241);"><span style="color: rgb(195, 24, 24);"><br/></span></span></span></span></li></ul>[ERROR ->]</li></ul><div><span style="font-family: monospace, Courier;"><span style="color: rgb(0, 128, 0);"><b"): TechnicalNotesComponent@11:11272
Unexpected closing tag "ul" (" 240, 241);"><span style="color: rgb(195, 24, 24);"><br/></span></span></span></span></li></ul></li>[ERROR ->]</ul><div><span style="font-family: monospace, Courier;"><span style="color: rgb(0, 128, 0);"><br/></"): TechnicalNotesComponent@11:11277
Unexpected closing tag "div" ("material-icons">close</i></div><div class="chip">cheatsheet<i class="material-icons">close</i></div>[ERROR ->]</div></div></div></main>"): TechnicalNotesComponent@11:11645
Unexpected closing tag "div" ("al-icons">close</i></div><div class="chip">cheatsheet<i class="material-icons">close</i></div></div>[ERROR ->]</div></div></main>"): TechnicalNotesComponent@11:11651
Unexpected closing tag "div" ("ns">close</i></div><div class="chip">cheatsheet<i class="material-icons">close</i></div></div></div>[ERROR ->]</div></main>"): TechnicalNotesComponent@11:11657
Unexpected closing tag "main" ("ose</i></div><div class="chip">cheatsheet<i class="material-icons">close</i></div></div></div></div>[ERROR ->]</main>"): TechnicalNotesComponent@11:11663 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
Unexpected closing tag "li" (": rgb(239, 240, 241);">\noindent\makebox[\textwidth]{\includegraphics[width=\paperwidth]{...}}</div>[ERROR ->]</li><li><span style="font-size: 13px;"><span style="font-family: Consolas, Menlo, Monaco, &quot;Luci"): TechnicalNotesComponent@11:10412
Unexpected closing tag "ul" (": rgb(239, 240, 241);"><span style="color: rgb(195, 24, 24);"><br/></span></span></span></span></li>[ERROR ->]</ul></li></ul><div><span style="font-family: monospace, Courier;"><span style="color: rgb(0, 128, 0)"): TechnicalNotesComponent@11:11267
Unexpected closing tag "li" ("(239, 240, 241);"><span style="color: rgb(195, 24, 24);"><br/></span></span></span></span></li></ul>[ERROR ->]</li></ul><div><span style="font-family: monospace, Courier;"><span style="color: rgb(0, 128, 0);"><b"): TechnicalNotesComponent@11:11272
Unexpected closing tag "ul" (" 240, 241);"><span style="color: rgb(195, 24, 24);"><br/></span></span></span></span></li></ul></li>[ERROR ->]</ul><div><span style="font-family: monospace, Courier;"><span style="color: rgb(0, 128, 0);"><br/></"): TechnicalNotesComponent@11:11277
Unexpected closing tag "div" ("material-icons">close</i></div><div class="chip">cheatsheet<i class="material-icons">close</i></div>[ERROR ->]</div></div></div></main>"): TechnicalNotesComponent@11:11645
Unexpected closing tag "div" ("al-icons">close</i></div><div class="chip">cheatsheet<i class="material-icons">close</i></div></div>[ERROR ->]</div></div></main>"): TechnicalNotesComponent@11:11651
Unexpected closing tag "div" ("ns">close</i></div><div class="chip">cheatsheet<i class="material-icons">close</i></div></div></div>[ERROR ->]</div></main>"): TechnicalNotesComponent@11:11657
Unexpected closing tag "main" ("ose</i></div><div class="chip">cheatsheet<i class="material-icons">close</i></div></div></div></div>[ERROR ->]</main>"): TechnicalNotesComponent@11:11663
    at DirectiveNormalizer.normalizeLoadedTemplate (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:13712:21)
    at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:13705:53)
    at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:232:26)
    at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:114:43)
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:502:57
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35)
    at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:47)
    at drainMicroTaskQueue (http://localhost:3000/node_modules/zone.js/dist/zone.js:401:35)
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:339:25)consoleError @ zone.js:388_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339
zone.js:390 Error: Uncaught (in promise): Error: Template parse errors:(…)consoleError @ zone.js:390_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339

我在其他地方读到过，由于路由配置不正确，可能会产生类似的错误。我现在有<base href="/"/>，我需要回去了解更多关于路由的信息吗？

我发现问题与我所说的特殊字符非常接近，但 W3C 解析器，即使声明了一个严格的文档，似乎也认为这没问题。我看到的是不符合标准的解析器吗？

【问题讨论】：

标签： html angular typescript angular2-routing angular2-template

【解决方案1】：

问题在于，作为 Angular 2 模板，在进行所有替换和处理之前，代码不一定符合 HTML。

https://angular.io/docs/ts/latest/guide/template-syntax.html

在这种情况下，要渲染的 Latex 代码包含一个 }} 序列，它是插值序列的 Angular 2 模板结尾，并被解释为这样。可以使用{{ '}' }} {{ '}' }} 逃脱，但在我的情况下，这种方法导致超出最大插值数。

逐字呈现代码的更好方法是将ngNonBindable 指令应用于包含的 DOM 元素。

https://docs.angularjs.org/api/ng/directive/ngNonBindable

【讨论】：