时间戳

首页 > 解决方案 > 集成 polyfill 以使 Angular 与 Internet Explorer 兼容的正确方法是什么？

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

问题描述

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

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

IE中的Angular App Empty Page但在Chrome中有效

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

使用 Angular 7 的 IE11 空白页面

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 不起作用？无论如何，我暂时被困住了，我希望你们中的一些人能帮助我。提前感谢您的反馈，祝您有美好的一天。

标签： angularinternet-explorerweb-componentpolyfills

解决方案

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

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

推荐阅读