IE11的Angular 6导致空白窗口答案

【问题标题】：Angular 6 for IE11 resulting in blank windowIE11的Angular 6导致空白窗口
【发布时间】：2018-07-19 15:29:09
【问题描述】：

所以我对我正在处理的项目有一些问题 - 一切运行正常，除了我试图取消注释 polyfill.ts 中 IE9、10 和 11 的导入语句。我取消了所有的注释并且运行 npm install --save classlist.js 和 npm install --save web-animations-js。一切仍然在 chrome 上构建和运行，但是它仍然不能在 IE11 上运行，这种行为背后有什么想法吗？它在 IE11 上以棱角分明的标志打开，但只是一个空白屏幕。

我错过了什么吗？我搜索了互联网并与gitter交谈无济于事。

我找到了类似的帖子，但没有找到合适的答案。（例如，Angular 5 doesn't work in IE9 "Internet Explorer cannot display the webpage"）

还有

Angular 2 / 4 / 5 not working in IE11

尝试添加到 index.html：（增加了显示空间）

尝试添加到 index.html：

和导入'core-js/client/shim'；到 polyfill.ts

Polyfill.ts：

import "core-js/es7/reflect";
import "zone.js/dist/zone";

/* IE9, IE10 and IE11 */
 import "core-js/es6/array";
 import "core-js/es6/date";
 import "core-js/es6/function";
 import "core-js/es6/map";
 import "core-js/es6/math";
 import "core-js/es6/number";
 import "core-js/es6/object";
 import "core-js/es6/parse-float";
 import "core-js/es6/parse-int";
 import "core-js/es6/regexp";
 import "core-js/es6/set";
 import "core-js/es6/string";
 import "core-js/es6/symbol";
 import "core-js/es6/weak-map";
/* IE10 and IE11 for NgClass support on SVG elements */
import "classlist.js";  // Run `npm install --save classlist.js`.

/*added for testing purposes, no positive result.*/
//import 'core-js/es7/reflect';
//import 'core-js/client/shim';

/* IE10 and IE11 for Reflect API. */
 import "core-js/es6/reflect";

/* Web Animations */
 import "web-animations-js";  // Run `npm install --save web-animations-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>

到我的 index.html

【问题讨论】：

请出示polyfills.ts的代码。
好的，已经添加了——由于其他堆栈溢出页面的建议，已经添加了注释掉的东西，但是——没有效果//产生预期的结果。
当然——就像 OP 中所说的那样，我确实运行了 cmets 中列出的 npm 安装。提前感谢你们提供的任何帮助！
您是否从 IE 的控制台窗口收到任何错误？（打开控制台窗口，然后刷新页面）
是的，我收到两个语法错误： Script1002: 语法错误 Vendor.js (137,1) Script1002: 语法错误 main.js 和 HTML1506: Unexpected token localhost:8095 (25,1) 和那些指的是这些行：在 vendor.js: class PlatformLocation { } in main.js

标签： angular angular6 internet-explorer-11

【解决方案1】：

为了解决这个问题，我：

1.  changed TSConfig to target ES5, and the module to es2015.
2.  I changed the order of the polyfills,
3.  I reran downloads for installing classlist.js and web-animations.js.
4.  and, I added:       < meta http-equiv="X-UA-Compatible" content="IE=edge">
to my html right below the meta tag <meta charset="utf-8">.

不确定其中的哪一部分解决了我的问题。我按照我认为影响结果的顺序排列了这份清单。

【讨论】：

我需要做的就是将 TSConfig 更改为以 ES5 为目标。

【解决方案2】：

如果您使用的是 Angular v7.*.* ，您可以按照 src/polyfills.ts 中的polyfills.ts 并按照其内部提示解决它，例如这个：

/** IE9, IE10, IE11, and Chrome <55 requires all of the following polyfills.
 *  This also includes Android Emulators with older versions of Chrome and Google Search/Googlebot
 */

import "core-js/es6/symbol";
import "core-js/es6/object";
import "core-js/es6/function";
import "core-js/es6/parse-int";
import "core-js/es6/parse-float";
import "core-js/es6/number";
import "core-js/es6/math";
import "core-js/es6/string";
import "core-js/es6/date";
import "core-js/es6/array";
import "core-js/es6/regexp";
import "core-js/es6/map";
import "core-js/es6/weak-map";
import "core-js/es6/set";

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import "classlist.js"; // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
import "core-js/es6/reflect";

您需要做的只是取消注释上面的行并安装另一个以下行：

npm install --save classlist.js

同样，ng serve 您现在可以在 IE 11 中查看您的结果。

【讨论】：