角度2/4/5在 IE11中不起作用

我试图找出为什么我的角2应用程序是卡在显示加载... 当运行在 IE 11。

根据某人的建议，我已经尝试了这个柱塞，由某人在栈溢出发布，在 Chrome 和 IE 11。在 Chrome 上运行良好，但在 IE11上失败了。同样的错误，坚持说“载入...”

活塞是: Https://plnkr.co/edit/6zvfbrh5yohwc714gbbk?p=preview

<!DOCTYPE html>
<html>
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<title>Router Sample</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/http.dev.js"></script>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'src': {defaultExtension: 'ts'}}
});
System.import('src/boot')
.then(null, console.error.bind(console));
</script>
</head>


<body>
<my-app>loading...</my-app>
</body>


</html>

有人知道为什么 IE11无法运行角度2应用程序吗？

谢谢！

191796 次浏览
小开

我今天碰到了这个问题。我在 GitHub 上找到了一个解决方案，它不需要升级到测试版本。

将下面的脚本添加到 html:

<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

这解决了我的问题

小开

最新版本的 angular只是为常绿浏览器默认设置..。

当前的设置是为所谓的“常绿”浏览器设置的; 这是自动更新自身的浏览器的最新版本。这包括 Safari > = 10，Chrome > = 55(包括 Opera) ，桌面版 Edge > = 13，移动版 iOS 10和 Chrome。这也包括 Firefox，尽管没有被提及。

有关浏览器支持的更多信息以及针对特定浏览器的建议填充列表，请参见此处

这意味着 手动操作必须启用正确的填充才能在 IE11及以下版本中使用 Angular。

要做到这一点，进入 polyfills.ts(默认情况下在 src文件夹中) ，只需要 无可奉告导入以下内容:

/***************************************************************************************************
* BROWSER POLYFILLS
*/


/** 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/set';

注意，注释实际上在文件中，因此很容易找到。

如果您仍然有问题，可以按照 @MikeDub的建议，将 target属性降级到 tsconfig.json中的 es5。这样做的目的是将任何 es6定义的编译输出更改为 es5定义。例如，脂肪箭头函数(()=>{})将被编译成匿名函数(function(){})。您可以找到 es6支持的浏览器的列表 给你。

笔记

•我在 @jackOfAll的评论中被问到，即使用户使用的是不需要 IE11填充的常绿浏览器，IE11填充是否会被加载。答案是，是的！包含的 IE11填充将采取您的填充文件从 ~162KB到 ~258KB的8月8’17。我已经投资，试图解决这个问题，但它似乎不可能在这个时候。

•如果您在 IE10及以下版本中出现错误，请进入 package.json，并将 webpack-dev-server专门降级为 2.7.1。高于这个数字的版本不再支持“旧的”IE 版本。

小开

截至2017年2月

使用 Angular-Cli项目，所有行在 polyfills.ts文件已经取消注释，所以所有的填充物已经被利用。

我找到了这个解决方案 给你来解决我的问题。

综上所述，IE 不支持 lambda 箭头/脂肪箭头函数是 第六季的一个特点。(如果填充物对你不起作用的话)。

解决方案 : 您需要将 第五季作为目标，以便它在任何 IE 版本中运行，微软只在新的 Edge Browser 中引入了对此的支持。

这是在 src/tsconfig.json下发现的:

"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
小开

截至2017年9月(节点版本 = v6.11.3，npm 版本 = 3.10.10) ，这是我的工作方式(感谢@Zze) :

编辑 polyfills.ts并取消注释 IE11所需的导入。

更确切地说，编辑 polyfills.ts(默认位于 src文件夹中) ，取消对 IE11所需的所有行的注释(文件中的注释解释了在 IE11上运行所需的导入)。

一个小小的警告: 取消 classlist.js和 web-animations-js的行注释时要注意。这些被注释的行都有一个特定的注释: 您必须在取消注释之前运行相关的 npm 命令，否则 polyfill. ts 的处理将中断。

作为一个词的解释，填充是代码片段，实现一个特性的 Web 浏览器，不支持它。 这就是为什么在默认的 polyfils.ts 配置中只有一小部分导入是活动的 (因为它瞄准的是 所谓的“常绿”浏览器; 自动更新的浏览器的最新版本)。

小开

编辑2018/05/15 : 这可以通过 超能力者标签实现; 请将该标签添加到您的 index.html 并忽略本文。

这并不是对这个问题的完整回答(技术上的回答请参考 @ Zze 的回答在上面) ，但是有一个重要的步骤需要添加 需求:

兼容模式

即使有了合适的填充，在 IE11上使用填充运行 Angular 2 + 应用程序仍然存在问题。如果您在内部网主机上运行站点(即。如果你正在测试它在 http://localhost或另一个映射的本地域名) ，你必须进入兼容性视图设置，并取消选中“显示内部网站在兼容性视图”，因为 IE11的兼容性视图打破了一对夫妇的约定，包括在 ES5角填充。

enter image description here

小开

我也有同样的问题，但没有一个解决办法对我有效。而是在(主页)中添加以下一行。在 <head>下修正了 html。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
小开

您需要为目标浏览器调整 polyfils.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';
小开

对我来说，使用 iExplorer 11和 Angular 2，我通过做两件事来解决上述问题:

在 index.html 中 补充:

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

在 Src 填充物中 无评论:

/** 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';
小开

对我有效的是我遵循以下步骤来提高我在 IE11中的应用程序性能 1.)在 Index.html 文件中，添加以下 CDN

<script src="https://npmcdn.com/angular2@2.0.0-
beta.17/es6/dev/src/testing/shims_for_IE.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.201711092/classList.min.js"></script>

2)在 polyfill s.ts 文件中添加以下导入:

import 'core-js/client/shim';
小开

填充材料

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/es7/array';


import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
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`.


/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';


/**
* Required to support Web Animations `@angular/animation`.
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
**/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.
小开

我也遇到了同样的问题，如果您已经启用了在兼容性视图中显示内部网站 polyfill s.ts 将无法工作，那么您仍然需要添加以下代码行。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
小开

改变 tsconfig.json

"target":"es5",

解决了我的问题

小开

如果您仍然有问题，不是所有的 JavaScript 函数工作添加到您的填充这一行。它修正了缺失的“价值观”方法:

import 'core-js/es7/object';

这一行修正了缺少的“包含”方法:

import 'core-js/es7/array'
小开

如果没有其他解决方案对您有效，那么就值得研究问题的根源。它可以比 npm 模块直接插入 ES6代码，而 ES6代码不能被发送。

对我来说

SCRIPT1002: 下面一行的语法错误 vendor.js (114536,27) :

const ucs2encode = array => String.fromCodePoint(...array);

我搜索了 Node _ module文件夹，找到了这一行来自哪个文件。原来罪魁祸首是 Punycode.js，它在2.1.0版本中直接使用 ES6。

在我把它降级到使用 ES5的1.4.1之后，问题就解决了。

小开

我有一个 Angular4应用程序，即使对我来说，也不是在 IE11浏览器工作，我已经做了以下改变，现在它的工作正常。 只需在 Html文件中添加以下代码

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

只需要从 填充物文件中取消下面几行的注释即可

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

以上两个步骤将解决您的问题，请让我知道，如果有什么将在那里。谢谢! ! ！

小开
  1. 取消注释 polyfill.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';

安装 npm 软件包 注意注释中有一些 npm 安装命令。如果您使用的是角度 CLI 的早期版本，可能还有第三个版本。对于 Angular CLI 版本7、6和1.7，您需要运行:

Npm install ——保存 classlist.js

Npm install ——保存 web-animations-js

现在打开 IE 并呈现您的应用程序，然后检查:)

小开

我尝试了这个线程中的所有解决方案，以及其他一些解决方案，都没有成功。最终我修复了这个问题，更新了项目中的每个包，包括 MAJOR 版本更改。所以:

  1. 运行过期的 npm
  2. 根据结果更新 package.json，使用当前列中显示的数字(这可能会破坏项目，请小心)
  3. 运行 npm install
  4. 确保我也有在其他答案中注明的注释填充。

就是这样。我希望我能找出罪魁祸首是哪个图书馆。我得到的实际错误是 Angular 6中的 vendor.js 中的“语法错误”。

小开

如何在 Angular8中解决这个问题

Ts 取消注释 import 'classlist.js';和 import 'web-animations-js';，然后使用 npm install --save classlist.js和 npm install --save web-animations-js安装两个依赖项。

用 "target":"es5",更新 tsconfig.json

然后 ng serve运行应用程序并在 IE 中打开，它将工作

小开

  1. 在 src/polyfill.js 中取消注释 IE 部分,

    /* * IE10和 IE11要求对 SVG 元素的 NgClass 支持如下 */

    导入“ classlist.js”;

  2. 如果丢失包有任何构建错误,

    Npm install classlist.js —— save-Precision

  3. 请确保包括以下行来设置默认的 IE 文档模式。否则它将在版本7中打开

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
小开

开箱即用的角9现在在 IE11中应该可以很好地工作。

我试了这里列出的所有建议，但没有一个奏效。不过，我还是设法找到了我在 app.module中导入的一个特定库(确切地说是 ZXingScannerModule)。如果您的应用程序在第一页的 IE11失败，尝试删除库一次和检查在 IE11-它是完全错过了我的所有构建警告错误。如果您确实发现了这种情况，那么可以考虑划分使用这个库作为延迟加载模块的站点区域。

小开

Core-js lib 的最新版本提供了来自不同路径的填充。因此，请在 polyfill s.js 中使用以下内容。并且在 tsconfig.base.json中将 target值更改为 es5

/** 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';
小开

步骤1: 取消注释 polyfill s.ts 中的 plyfill。还要运行 polyfill s.ts 文件中提到的所有 npm install 命令来安装这些包

步骤2: 在 Browserslist 文件中，不要在提到 IE 9-11支持的行之前删除

步骤3: 在 tsconfig.json 文件中，将“ target”: “ es2015”更改为“ target”: “ es5”

这些步骤解决了我的问题


提交答案