Angular 2/4/5在IE11中无效

Question

Angular 2/4/5在IE11中无效

Pat*_*nte 114 internet-explorer typescript 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>

Run Code Online (Sandbox Code Playgroud)

任何人都知道为什么IE 11无法运行角度2应用程序？

谢谢!

Answer 1

Zze*_*Zze 182

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

目前的设置适用于所谓的"常青树"浏览器; 最新版本的浏览器自动更新自己.这包括Safari> = 10,Chrome> = 55(包括Opera),桌面上的Edge> = 13,以及移动设备上的iOS 10和Chrome.
这也包括firefox,虽然没有提到.

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

这意味着您必须手动启用正确的polyfill才能使Angular在IE11及更低版本中正常工作.

要实现此目的,请进入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';

Run Code Online (Sandbox Code Playgroud)

请注意,注释实际上在文件中,因此很容易找到.

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

笔记

•在评论中我询问@jackOfAllIE11 polyfill是否已加载,即使用户位于不需要它们的常绿浏览器中也是如此.答案是,是的,他们是!在IE11 polyfills列入将你的填充工具从文件~162KB到~258KB为8月8日'17的.我已经投入试图解决这个问题,但目前似乎不可能.

•如果您在IE10及以下版本中收到错误,请进入package.json并降级webpack-dev-server至2.7.1专门.高于此版本的版本不再支持"较旧"的IE版本.

我的角度5项目也有同样的错误,即使我已经取消注释IE的polyfill,仍然无法在IE浏览器中工作.太奇怪了.... (3认同)
@dudewad我正在尝试创建2个单独的包，其中一个明确地用于IE11，然后将该包包装在IE条件注释中，这将阻止它通过chrome浏览。 (2认同)

Answer 2

Ale*_* W. 21

我有完全相同的问题,没有一个解决方案适合我.而是在<head>固定它的(主页).html中添加以下行.

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

Run Code Online (Sandbox Code Playgroud)

Answer 3

Ash*_*non 19

我今天遇到了这个问题.我在GitHub上找到了一个解决方案,它不需要转到更高版本的beta.

将以下脚本添加到您的html:

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

Run Code Online (Sandbox Code Playgroud)

这解决了我的问题.有关更多详细信息,请在此处关注github问题:https://github.com/angular/angular/issues/7144

这个解决方案对我不起作用:( ... [在IE上运行VS2015项目] (2认同)

Answer 4

Jig*_*att 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';

Run Code Online (Sandbox Code Playgroud)

Answer 5

Mik*_*Dub 10

截至2017年2月

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

我在这里找到了解决问题的方法.

总结上面的链接,IE不支持作为es6特征的lambda箭头/胖箭头函数.(这是polyfills.ts不适合你).

解决方案:您需要将es5作为目标,以便在任何IE版本中运行,对此的支持仅在Microsoft的新Edge浏览器中引入.

这在以下位置找到src/tsconfig.json:

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

Run Code Online (Sandbox Code Playgroud)

在我的案例中我的经历如何......误导？polyfills已经取消注释,并没有解决我在IE11中遇到的问题.几乎认为这不值得投票. (7认同)
此外，我已经在tsconfig中将es5作为目标，但仍然有问题。 (4认同)

Answer 6

Bel*_*tin 10

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

在index.html中 添加:

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 7

Sho*_*nja 8

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

这不是问题的完整答案(技术答案请参考上面@Zze的答案),但需要添加一个重要步骤:

兼容模式

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

以我的经验，如果您的应用是在Intranet主机上提供的，则使用此元标记不会覆盖IE 11的默认设置，即“在兼容性视图中显示Intranet站点”。Intranet应用程序的用户仍将需要进入并手动取消选中此选项，这不理想。我目前正在寻找一种解决方法-也许编译为ES5而不是ES6。 (2认同)

Answer 8

小智 8

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

Run Code Online (Sandbox Code Playgroud)

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

npm install-保存classlist.js

npm install-保存web-animations-js

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

Answer 9

Eke*_*eko 7

截至2017年9月(节点版本= v6.11.3,npm版本= 3.10.10),这对我有用(感谢@Zze):

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

更精确,编辑polyfills.ts(src默认情况下位于文件夹中)并且只取消注释IE11所需的所有行(文件中的注释确切地解释了在IE11上运行所需的导入).

一个小小的警告:在取消注释行时要注意classlist.js和web-animations-js.这些注释行每个都有一个特定的注释:您必须在取消注释或处理polyfills.ts之前运行相关的npm命令.

作为解释,polyfill是在Web浏览器上实现不支持它的功能的代码片段.这就是为什么在默认的polyfills.ts配置中只有一小部分导入是活动的(因为它针对的是所谓的"常青树"浏览器;最后一个版本的浏览器会自动更新).

Answer 10

小智 5

如果您仍然遇到并非所有 JavaScript 函数都能正常工作的问题，请在您的 polyfills 中添加这一行。它修复了缺失的“值”方法：

import 'core-js/es7/object';

Run Code Online (Sandbox Code Playgroud)

这一行修复了缺失的“包含”方法：

import 'core-js/es7/array'

Run Code Online (Sandbox Code Playgroud)

Answer 11

San*_*ari 5

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	9 年，7 月前
查看次数：	152782 次
最近记录：	5 年，10 月前