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

124

我试图弄清楚为什么我的angular 2应用程序在IE 11中运行时仍无法显示“正在加载...”。

遵循某人的建议，我尝试了此人，它是由某人在堆栈溢出时在chrome和IE 11上发布的。在Chrome上工作正常，但在IE 11上失败。出现同样的错误，只是说“正在加载...”

窃听器是：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>

有谁知道为什么IE 11无法运行angular 2应用程序？

谢谢！

angular  typescript  internet-explorer 
— 帕特碎骨机Laplante
source
答案是现在使用2.0.0-beta.0。
— Pat Bone破碎机Laplante'2

Answers:

187

最新版本angular 仅默认为常绿浏览器设置...

当前的设置适用于所谓的“常绿”浏览器；自动更新自身的浏览器的最新版本。这包括Safari> = 10，Chrome> = 55（包括Opera），Edge> = 13（在桌面上）以及iOS 10和Chrome在移动设备上。
这也包括Firefox，尽管未提及。

请参阅此处，以获取有关浏览器支持的更多信息，以及针对特定浏览器的建议填充列表。https://angular.io/guide/browser-support#polyfill-libs

这意味着您必须手动启用正确的polyfill才能在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';

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

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

笔记

•在评论中询问我@jackOfAll是否加载了IE11 polyfills，即使用户处于不需要它们的常绿浏览器中也是如此。答案是，是的！在IE11 polyfills列入将你的填充工具从文件~162KB到~258KB为8月8日'17的。我已投资尝试解决此问题，但目前看来尚不可能。

•如果您在IE10及以下版本中遇到错误，请进入package.json并降级webpack-dev-server为2.7.1特定版本。高于此版本的版本不再支持“旧” IE版本。

— 泽
source
3
即使我没有注释IE的polyfill，我的angular 5项目也有相同的错误，仍然无法在IE浏览器中工作。太奇怪了....
— 阿比
取消注释所有提到的导入以及下面的导入NgClass。最后安装“ npm install --save classlist.js”。就我而言，这是可行的。
— Vaibhav
2
@dudewad我正在尝试创建2个单独的包，其中一个明确地用于IE11，然后将该包包装在IE条件注释中，这将阻止它在chrome中通过。
— Zze
1
@Zze好，那对您来说肯定是彻底的。很好，我喜欢。
— dudewad
1
@Zze条件注释已在IE10中删除，仅在IE5-9中受支持。因此，除非您专门进行了一些用户代理嗅探，以便在运行时将捆绑软件添加到页面，否则不会为IE10 +加载IE捆绑软件。
— bmcminn
19

我今天遇到了这个问题。我在GitHub上找到了一个解决方案，该解决方案不需要使用Beta的更高版本。

将以下脚本添加到您的html中：

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

这为我解决了问题。有关更多详细信息，您可以在此处关注github问题：https : //github.com/angular/angular/issues/7144

— 阿什莉·格里农（Ashley Grenon）
source
2
这个解决方案对我不起作用:( ... [在IE上运行VS2015的项目上]
— Ceylan MumunKocabaş16
12

截至2017年2月

使用Angular-Cli项目，polyfills.ts文件中的所有行均已取消注释，因此所有polyfill已被利用。

我在这里找到此解决方案来解决我的问题。

总结上述链接，IE不支持拉姆达箭头/脂肪箭头功能它们的特征ES6。（这是如果polyfills.ts对您不起作用）。

解决方案：您需要将es5定位为它可以在任何IE版本中运行，对此的支持仅由Microsoft在新的Edge浏览器中引入。

可在以下位置找到src/tsconfig.json：

"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
— 麦克·杜布
source
这个答案很有误导性。polyfill是使IE 9及更高版本与ES6标准兼容的脚本，如下所示：angular.io/docs/ts/latest/guide/browser-support.html因此，浏览器本身是否支持箭头功能并不重要， polyfills完全缓解了这个问题。
— Zze
8
在我的案件中，我的经历如何……令人误解？该polyfill已取消注释，并且无法解决我在IE11中遇到的问题。几乎不认为这值得一票。
— MikeDub '17
重新阅读此内容后，我了解您要说的内容，但是目前的措辞听起来好像您必须手动将所有.ts文件从使用粗箭头更改为匿名功能。我认为，如果您更改ecma脚本目标，则应该在该链接中剪下引号，以说明编译器输出的不同之处，从而减轻了该问题。
— Zze
5
此外，我已经在tsconfig中将es5作为目标，但仍然有问题。
— gh0st
1
@MikeDub我尝试使用您的解决方案，但不适用于IE11。能为我提供更好的方法吗？
— Prasanna Sasne
11

您需要通过取消对相应部分的注释来调整目标浏览器的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';
— 吉加尔·巴特（Jigar Bhatt）
source
1
这很棒。谢谢。
— AtLeastTheresToast，
10

对于使用iexplorer 11和Angular 2的我来说，我通过做两件事解决了上述所有问题：

在index.html中 添加：

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

在src \ 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';
— 贝伦·马丁
source
1
是的，这适用于IE11，但不适用于IE10：ERROR Error: Uncaught (in promise): TypeError: Object doesn't support property or method 'setPrototypeOf' at EmptyError (http://localhost:4200/vendor.js:102653:9)
— JuniorMayhé，
10
  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 install命令。如果您使用的是早期版本的Angular CLI，则可能还有第三个版本。对于Angular CLI版本7、6和1.7，您需要运行：

npm install-保存classlist.js

npm install-保存web-animations-js

现在打开IE并渲染您的应用程序并检查:)

— 阿里
source
8

截至2017年9月（节点版本= v6.11.3，npm版本= 3.10.10），这对我有用（感谢@Zze）：

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

更准确地说，进行编辑polyfills.ts（src默认情况下位于文件夹中），然后仅取消注释IE11所需的所有行（文件中的注释确切说明了要在IE11上运行需要进行哪些导入）。

一个小警告：取消对classlist.js和的注释时，请注意web-animations-js。这些带注释的行分别有一个特定的注释：您必须先运行关联的npm命令，然后再对其进行注释，否则polyfills.ts的处理将中断。

简而言之，polyfill是一些代码片段，它们在不支持该功能的Web浏览器上实现了该功能。这就是为什么在默认的polyfills.ts配置中，只有最少的一组导入处于活动状态的原因（因为它的目标是所谓的“常绿”浏览器；最新版本的浏览器会自动自我更新）。

— 惠子
source
8

编辑2018/05/15：这可以通过meta标签来实现; 请将该标签添加到您的index.html中，而忽略此帖子。

这不是问题的完整答案（有关技术答案，请参阅上面的@Zze的答案），但是需要添加一个重要步骤：

兼容模式

即使安装了适当的polyfill，使用IE11上的polyfill运行Angular 2+应用程序仍然存在问题。如果您要在Intranet主机上运行该站点（即，如果您正在http：// localhost或另一个映射的本地域名上对其进行测试），则必须进入“兼容性视图”设置，然后取消选中“在兼容性视图中显示Intranet站点”，因为IE11的“兼容性视图”打破了Angular ES5 polyfills中包含的一些约定。

在此处输入图片说明

— gun弹忍者
source
1
如果您遵循此解决方案，则必须在运行您的应用程序的所有客户端上执行此操作。在您的html文件中添加特殊标记会强制浏览器以可用的最新版本而不是兼容模式运行。请参考以下答案以找到标签：stackoverflow.com/a/47777695/4628364
— Poly
2
以我的经验，如果您的应用是在Intranet主机上提供的，则使用此元标记不会覆盖IE 11的默认设置，即“在兼容性视图中显示Intranet站点”。Intranet应用程序的用户仍将需要进入并手动取消选中此选项，这不理想。我目前正在寻找一种解决方法-也许编译为ES5而不是ES6。
— 凯尔·瓦塞拉
6

我有一个Angular4应用程序，即使对我来说，它也无法在IE11浏览器中工作，我做了以下更改，现在它可以正常工作。只需在index.html文件中添加以下代码

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

只是您需要取消注释以下这些行 polyfills.ts文件中

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

以上两个步骤可以解决您的问题，如果有什么请告诉我。谢谢！！！

— 桑杰·蒂瓦里（Sanjay Tiwari）
source
我已经thses 2个部分取消注释，但它仍然没有工作，你有另一种解决方案
— 门纳斋月
5

如果仍然有问题，并不是所有的JavaScript函数都可以正常工作，请将此行添加到您的polyfills中。它修复了丢失的“值”方法：

import 'core-js/es7/object';

此行修复了缺少的“ includes”方法：

import 'core-js/es7/array'
— 基督教
source
4

我遇到了同样的问题，如果您已在“兼容性视图”中启用了“显示Intranet”站点，则polyfills.ts将无法正常工作，您仍然需要按照说明添加以下行。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
— 伊万·洛佩兹（Ivan Lopez）
source
3

改变中 tsconfig.json 

"target":"es5",

解决了我的问题

— 用户名
source
2

对我有用的是，我按照以下步骤来改善IE 11中的应用程序性能。）在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.）在polyfills.ts文件中，添加以下导入：

import 'core-js/client/shim';
— 高拉夫·古普塔
source
2

在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/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`.
— 科尔迪普·甘地
source
2

如果没有其他解决方案对您有用，则值得调查问题的根源。可能不是npm模块直接插入ES6代码，而无法编译。

就我而言，

SCRIPT1002：语法错误vendor.js（114536,27）在以下行：

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

我搜索了node_modules文件夹，发现该行来自哪个文件。原来，罪魁祸首是punycode.js，在其2.1.0版本中直接使用了ES6。

在将其降级为使用ES5的1.4.1之后，问题得以解决。

— typhon04
source
1
非常感谢您的回复。虽然它不能解决问题，但是它可以帮助我找到麻烦制造者模块，并将问题告知作者。
— lucifer63 '18
2

如何在Angular8中解决此问题

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

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

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

— 里约
source
1

  1. 取消注释src / polyfill.js中的IE部分，

    / **对于SVG元素的NgClass支持，IE10和IE11需要以下条件* /

    导入'classlist.js';

  2. 如果由于缺少包而产生任何构建错误，

    npm install classlist.js-保存精确

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

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
— 苏德·穆罕默德（Sudheer Muhammed）
source
0

我尝试了该线程中的每个解决方案以及其他解决方案，但均未成功。最终为我解决此问题的是更新项目中的每个软件包，包括主要版本更改。所以：

  1. 运行npm已过时
  2. 使用结果中当前列中显示的数字更新package.json（请注意，这可能会破坏您的项目）
  3. 运行npm install
  4. 确保我也按照其他答案中的说明对polyfill进行注释。

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

— 约旦
source
0

开箱即用的Angular 9现在在IE11中应该可以正常使用。

我尝试了此处列出的所有建议，但没有一个起作用。但是，我确实设法将其跟踪到要导入的特定库中app.module（ZXingScannerModule准确地说）。如果您的应用在第一页上的IE11中失败，请尝试一次删除一个库并签入IE11-我所有的构建警告错误中都将它完全丢失了。如果确实是这种情况，请考虑对使用该库作为延迟加载模块的站点区域进行分区。

— 安德鲁·少年·霍华德
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.