集成 polyfill 以使 Angular 与 Internet Explorer 兼容的正确方法是什么？答案

【问题标题】：What is the right way to integrate polyfills to make Angular compatible with Internet Explorer?集成 polyfill 以使 Angular 与 Internet Explorer 兼容的正确方法是什么？
【发布时间】：2019-06-05 12:55:46
【问题描述】：

我使用 Angular 开发客户端图形界面。应用程序的用户必须能够从 Internet Explorer 查看图形界面。问题是 Internet Explorer 不显示任何内容，只是一个空白页。其他浏览器正确显示 Angular 应用程序。我知道我必须使用 polyfill 来做到这一点，但我所有使用 polyfill 的尝试都失败了。那么，正确的做法是什么？

我使用 Angular 8、NodeJS v10.15.3，我的 Angular 应用程序实现了一些 Web 组件 和 Angular 路由器。我对该主题进行了一些研究，并通过交叉检查不同的信息，我发现我能够编写 polyfills.ts 文件，根据以下内容，这在我看来是非常正确的：

Angular App Empty Page in IE but works in Chrome

https://blog.angularindepth.com/angular-and-internet-explorer-5e59bb6fb4e9

IE11 empty page using Angular 7

https://angular.io/guide/browser-support#suggested-polyfills

所以，我的 polyfills.ts 文件如下所示：

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';

import 'classlist.js';

import 'core-js/es6/reflect';

import 'core-js/es7/reflect';
import 'core-js/es7/array';

import 'web-animations-js';

import 'zone.js/dist/zone';

/* for web components */
import '@webcomponents/custom-elements/src/native-shim';
import '@webcomponents/custom-elements/custom-elements.min';

我希望 Internet Explorer 能够显示我的内容，但是……没有。

在我添加 polyfill 之前，我有一个空白页。在我得到一个空白页面之后，但这次控制台内出现了不是错误的错误：

https://1drv.ms/f/s!ArJSYka9gM27oknTCiu7v0UohOFb

我也尝试过使用“polyfills.io”API，但并没有真正的结论。

我肯定忘记了配置中的某些内容，或者 polyfill 不起作用？无论如何，我暂时被困住了，我希望你们中的一些人能帮助我。提前感谢您的反馈，祝您有美好的一天。

【问题讨论】：

尝试使用 --prod 标志或类似 ng serve --live-reload false 运行您的应用程序，这可能有助于在 IE 中运行应用程序。参考：github.com/angular/angular-cli/issues/9508
@Deepak-MSFT 它不会改变任何东西，总是一个带有相同错误的空白页面（两个标志）。
请检查您的 tsconfig.json 文件并确保目标设置为 ES5 而不是 ES6。还要确保您在 index.html 文件中引用了 shim.min.js。
@Deepak-MSFT 谢谢！我只是将 es2015 更改为 es5，现在 IE 显示我的应用程序。有没有在 index.html 文件中引用 shim.min.js 的好方法？因为在脚本标签中放置“../node_modules/@webcomponents/custom-elements/src/shim.min”在我看来是一种奇怪的方式。
从您上次的评论来看，您的问题似乎已解决。我建议您将有用的建议标记为此问题的答案，以便将来在类似问题上帮助其他社区成员。感谢您的理解。

标签： angular internet-explorer web-component polyfills

【解决方案1】：

请检查您的 tsconfig.json 文件并确保目标设置为 ES5 而不是 ES6。还要确保您在 index.html 文件中引用了 shim.min.js。

关于shim.min.js，我也有同样的方法来引用它。

【讨论】：