使用 Angular 7 的 IE11 空白页面答案

【问题标题】：IE11 empty page using Angular 7使用 Angular 7 的 IE11 空白页面
【发布时间】：2019-03-21 14:40:12
【问题描述】：

我正在从主机测试我的个人网站。它适用于 chrome、safari、firefox，几乎适用于边缘，而不适用于 IE11。显示的页面是 index.html，脚本没有加载，所以，我的页面非常白。应该看什么方向？

下面是加载后的源码，只是渲染了index.html

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>xxxxx</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300, 400|Permanent+Marker|Fredoka+One" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<link rel="stylesheet" href="styles.e51f265321605de0a6b8.css"></head>
<body>
  <app-root></app-root>
  <script type="text/javascript" src="polyfills.46532d96d3286697c138.js">
</script>
<script type="text/javascript" src="runtime.a5dd35324ddfd942bef1.js"></script><script type="text/javascript" src="main.d7a4eeb20e2af3af291c.js"></script>
</body>
        </html>

【问题讨论】：

标签： angular internet-explorer

【解决方案1】：

polyfills.ts

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
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';

【讨论】：

TY 为您解答，这是我的第一个角度部署。 polyfills.ts 是解决方案。

【解决方案2】：

对于 angular8 用户。请参考下文。：

polyfills.ts :删除es后的数字

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
    import 'core-js/es/symbol';
    import 'core-js/es/object';
    import 'core-js/es/function';
    import 'core-js/es/parse-int';
    import 'core-js/es/parse-float';
    import 'core-js/es/number';
    import 'core-js/es/math';
    import 'core-js/es/string';
    import 'core-js/es/date';
    import 'core-js/es/array';
    import 'core-js/es/regexp';
    import 'core-js/es/map';
    import 'core-js/es/weak-map';
    import 'core-js/es/set';
    import 'classlist.js';  // Run `npm install --save classlist.js`.

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

tsconfig.json

"target": "es5", // "target": "es2015",

浏览器列表

IE 9-11 # For IE 9-11 support, **remove 'not'.**

信用：https://dev.to/paulinhapenedo/angular-8-and-ie-11-1ed2

【讨论】：

【解决方案3】：

你应该看看你有没有好的polyfills。

你的控制台有错误吗？

【讨论】：

【解决方案4】：

除了激活 polyfills，我个人还必须在生产环境中取消选中“兼容性视图设置”下的“在兼容性视图中显示 Intranet 站点”。也许这也适用于你。

【讨论】：

【解决方案5】：

我正在使用 IE11 在 Windows 10 中运行 Angular 8 应用程序。

我尝试了许多来自 stackoverflow 的解决方案。但没有任何工作。然后我分别尝试了相同的解决方案，然后我得出了一个结论。

这是我的最终解决方案。我不适合多少人。但对我来说它有效。

1. tsconfig.json

   "target": "es2015"

改为

"target": "es5"

2。停止您的应用程序并重新开始。这是强制性的。

【讨论】：

【解决方案6】：

这里是解决方案（2021）：

转到tsconfig.json 并将target 更改为es5

"target": "es5"

转到browserslist并删除not作为文件中的描述以支持IE 9 -11

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.

到

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, remove 'not'.

在 index.html 文件中添加meta 标签

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

【讨论】：