Angular 2 QuickStart <script /> 失败答案

【问题标题】：Angular 2 QuickStart <script /> failingAngular 2 QuickStart <script /> 失败
【发布时间】：2016-07-24 03:50:08
【问题描述】：

我按照网络说明手动创建了 Angular 2 的 5 Min Quickstart。该应用程序与 QuickStart 教程几乎相同。但我像这样导入了 .js 文件：

<script src="node_modules/es6-shim/es6-shim.min.js" />
<script src="node_modules/systemjs/dist/system-polyfills.js" />
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js" />
<script src="node_modules/angular2/bundles/angular2-polyfills.js" />
<script src="node_modules/systemjs/dist/system.src.js" />
<script src="node_modules/rxjs/bundles/Rx.js" />
<script src="node_modules/angular2/bundles/angular2.dev.js" />

像下面这样更改它们，使应用程序工作：

<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js></script>   
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

任何人都可以解释这种奇怪的（至少对我而言）行为吗？

【问题讨论】：

script 标签本质上不是自闭合的..

标签： javascript html angular

【解决方案1】：

在 HTML 中，脚本元素有一个强制性的开始标签和一个强制性的结束标签。您不能省略结束标记。这就是 HTML 的简单设计方式。

如果你想要一些历史背景：

一般以HTML元素开头：

包含内容并具有强制性的开始和结束标签
包含的内容，但只允许选择有限的子元素，因此结束标记是可选的，因为它可以通过存在不允许作为子元素的元素来推断。（例如<p>）
同上，但只能在非常有限的地方使用，所以 start 标签也是可选的（例如<body>）
不能包含内容（例如<img>）所以结束标记为禁止

<script> 是在这个时候引入的。它可以包含内容（内联脚本），因此需要开始和结束标记。

随后出现了 XHTML。在 XHTML 中，<foo /> 和 <foo></foo> 的含义完全相同。除非您需要一个 XML 解析器，并且浏览器没有使用它们来解析 HTML（因为 HTML 不是 XML，所以它会出错）。您可以将文档作为application/xhtml+xml 提供，这将触发 XML 解析器……除非浏览器没有解析器，否则它会中断……如果有，则会出现黄屏死机，但作者做了一个微小的良构错误。

所以几乎所有人都放弃了 XHTML。

然后是 HTML 5，它被设计为向后兼容和向前兼容。

在 HTML 5 中 <foo /> 与 <foo> 的含义相同，因此最终上瘾的 XML 可以继续在图像开始标签的末尾放置 /。

在 HTML 5 中有许多新元素，但旧的浏览器不知道它们，所以当它们被引入时，所有它们的开始和结束标签都是强制性的，这样浏览器就不能识别它们（因此无法推断结束标记应该去哪里）不会阻塞 DOM。

【讨论】：

【解决方案2】：

根据各种 W3C 标准的规定，脚本标签不能自封闭。

C.3. Element Minimization and Empty Element Content

给定内容模型不是 EMPTY 的元素的空实例（例如，空标题或段落）不要使用最小化形式（例如，使用 <p> </p> 而不是 <p />）。

A.1.1. XHTML-1.0-Strict

    <!ENTITY % Script "CDATA">
        <!-- script expression -->

【讨论】：