Angular 2 快速入门<脚本 /> 失败

Angular 2 QuickStart <script /> failing

本文关键字：脚本 失败 Angular      更新时间：2023-12-06

我按照网络说明手动创建了 Angular 2 的 5 分钟快速入门。该应用程序与快速入门教程几乎相同。但是我导入了这样的.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>

谁能解释这种奇怪的(至少对我来说(行为？

在 HTML 中，脚本元素具有必需的开始标记和必需的结束标记。不能省略结束标记。这就是HTML的设计方式。

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

在开始时，HTML 元素通常：

  • 包含内容并具有必需的开始和结束标记
  • 包含内容，但只允许有限选择子元素，因此结束标记是可选的，因为它可以通过存在不允许作为子元素的元素来推断。(例如 <p> (
  • 如上所述，但只能在非常有限的地方使用，因此开始标签也是可选的(例如 <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上噎住。

脚本标记不能按照各种 W3C 标准的规定自行关闭。

C.3. 元素最小化和空元素内容

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

A.1.1.XHTML-1.0-严格

    <!ENTITY % Script "CDATA">
        <!-- script expression -->
相关文章：