Angular 2/4/5在IE11中无效

时间：2016-02-01 21:30:52

标签： angular typescript internet-explorer

我试图找出为什么我的角度2应用程序在IE 11中运行时显示正在加载...

根据某人的建议，我已经尝试过这个有关堆栈溢出的人，在chrome和IE 11上发布了。在Chrome上工作正常，但在IE 11上失败了。同样的错误，卡在上面说＆＃34;正在加载......＆＃34;

吸管是： 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 app？

谢谢！

21 个答案:

答案 0 :(得分：19)

我有完全相同的问题，没有一个解决方案适合我。而是在<head>下的（主页）.html中添加以下行修复它。 

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

答案 1 :(得分：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

答案 2 :(得分：10)

  

您需要调整目标浏览器的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';

答案 3 :(得分：8)

截至2017年2月

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

我发现此解决方案here可以解决我的问题。

总结上述链接， IE不支持lambda arrow / fat arrow功能，这是 es6 的一项功能。 （如果polyfills.ts不适合你）。

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

这可以在src/tsconfig.json：

下找到 
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",

答案 4 :(得分：8)

编辑2018/05/15 ：这可以通过meta tag来实现;请将该标记添加到index.html并忽略此帖子。

这不是问题的完整答案（技术答案请参考@Zze's answer above），但是需要的重要一步是：< / p>

兼容性模式

即使使用了适当的polyfill，在使用IE11上的polyfill运行Angular 2+应用程序时仍然存在问题。如果您从Intranet主机运行该站点（即，如果您在http://localhost或其他映射的本地域名进行测试），则必须进入兼容性视图设置并取消选中＆＃34;在兼容性中显示Intranet站点查看＆＃34;，因为IE11的兼容性视图打破了Angular的ES5 polyfill中包含的几个约定。

enter image description here

答案 5 :(得分：8)

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

index.html 中的

添加：

/etc/passwd
src \ polyfills.ts 中的

取消注释：

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

答案 6 :(得分：7)

  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并呈现您的应用程序并检查：）

答案 7 :(得分：6)

截至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的处理将会中断。

作为解释，polyfills是在Web浏览器上实现不支持它的功能的代码片段。 这就是为什么在默认的polyfills.ts配置中，只有一组最小的导入处于活动状态 （因为它瞄准了所谓的＆＃34;常青树＆＃34;浏览器;自动更新的浏览器的最新版本。）

答案 8 :(得分：3)

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

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

答案 9 :(得分：3)

我有一个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';

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

答案 10 :(得分：2)

对我有用的是我按照以下步骤改进了我在IE 11中的应用程序性能 1.）在Index.html文件中，添加以下CDN＆＃39> 

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

答案 11 :(得分：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`.

答案 12 :(得分：1)

步骤1：在polyfills.ts中取消注释填充。还运行polyfills.ts文件中提到的所有npm install命令来安装那些软件包

第2步：在浏览器列表文件中，不要删除提及IE 9-11支持的行之前

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

这些步骤解决了我的问题

答案 13 :(得分：1)

如果没有其他解决方案对您有用，则值得调查问题的根源。可能不是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之后，问题得以解决。

答案 14 :(得分：1)

更改tsconfig.json 

"target":"es5",

解决了我的问题

答案 15 :(得分：0)

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

import 'core-js/es7/object';

此行修复了丢失的“ includes”方法：

import 'core-js/es7/array'

答案 16 :(得分：0)

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

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

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

答案 17 :(得分：0)

如何在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中打开，它将正常工作

答案 18 :(得分：0)

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

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

    导入'classlist.js';

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

    npm install classlist.js-保存精确

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

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

答案 19 :(得分：0)

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

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

答案 20 :(得分：0)

最新版本的core-js lib从不同的路径提供了polyfills。因此请在polyfills.js中使用以下内容。并在target

中将es5的值更改为tsconfig.base.json 
/** 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';
相关问题
最新问题