简体   繁体   English

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

[英]Angular 2 / 4 / 5 not working in IE11

I am trying to figure out why my angular 2 app is stuck on showing Loading... when running in IE 11.我想弄清楚为什么我的 angular 2 应用程序在 IE 11 中运行时卡在显示 Loading... 上。

Following someone's suggestion, I've tried this plunker, posted by someone on stack overflow, on both chrome and IE 11. Works fine on Chrome, but fails on IE 11. Same error, stuck on saying "Loading..."根据某人的建议,我尝试了这个由堆栈溢出的人在 chrome 和 IE 11 上发布的 plunker。在 Chrome 上工作正常,但在 IE 11 上失败。同样的错误,坚持说“正在加载...”

The plunker is : https://plnkr.co/edit/6zVFbrH5yohwc714gBbk?p=preview plunker 是: 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>

Anybody got any idea as to why IE 11 fails to run the angular 2 app?任何人都知道为什么 IE 11 无法运行 angular 2 应用程序?

Thank you!谢谢!

The latest version of angular is only setup for evergreen browsers by default...默认情况下,最新版本的angular仅为常绿浏览器设置...

The current setup is for so-called "evergreen" browsers;当前设置适用于所谓的“常青”浏览器; the last versions of browsers that automatically update themselves.自动更新自己的最新版本的浏览器。 This includes Safari >= 10, Chrome >= 55 (including Opera), Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.这包括 Safari >= 10、Chrome >= 55(包括 Opera)、桌面上的 Edge >= 13,以及移动设备上的 iOS 10 和 Chrome。
This also includes firefox, although not mentioned.这也包括 firefox,虽然没有提到。

See here for more information on browser support along with a list of suggested polyfills for specific browsers.有关浏览器支持的更多信息以及针对特定浏览器的建议 polyfill 列表,请参见此处。 https://angular.io/guide/browser-support#polyfill-libs https://angular.io/guide/browser-support#polyfill-libs


This means that you manually have to enable the correct polyfills to get Angular working in IE11 and below. 这意味着您必须手动启用正确的 polyfills 才能让 Angular 在 IE11 及更低版本中工作。


To achieve this, go into polyfills.ts (in the src folder by default) and just uncomment the following imports:为此,请进入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';

Note that the comment is literally in the file, so this is easy to find.请注意,注释字面上在文件中,因此很容易找到。

If you are still having issues, you can downgrade the target property to es5 in tsconfig.json as @MikeDub suggested.如果您仍然有问题,你可以降级的target属性es5tsconfig.json作为@MikeDub建议。 What this does is change the compilation output of any es6 definitions to es5 definitions.这样做是将任何es6定义的编译输出更改为es5定义。 For example, fat arrow functions ( ()=>{} ) will be compiled to anonymous functions ( function(){} ).例如,胖箭头函数 ( ()=>{} ) 将被编译为匿名函数 ( function(){} )。 You can find a list of es6 supported browsers here .您可以在此处找到 es6 支持的浏览器列表。


Notes笔记

• I was asked in the comments by @jackOfAll whether IE11 polyfills are loaded even if the user is in an evergreen browser which doesn't need them. • 在@jackOfAll的评论中,我问我是否加载了 IE11 @jackOfAll即使用户使用的是不需要它们的常绿浏览器。 The answer is, yes they are!答案是,是的! The inclusion of the IE11 polyfills will take your polyfill file from ~162KB to ~258KB as of Aug 8 '17. ~162KB 8 月 8 日,包含 IE11 polyfill 将使您的~162KB文件从~162KB~258KB I have invested in trying to solve this however it does not seem possible at this time.我已经投资试图解决这个问题,但目前似乎不可能。

• If you are getting errors in IE10 and below, go into you package.json and downgrade webpack-dev-server to 2.7.1 specifically. • 如果您在 IE10 及以下版本中遇到错误,请进入package.json并将webpack-dev-server降级到2.7.1 Versions higher than this no longer support "older" IE versions.高于此的版本不再支持“较旧”的 IE 版本。

I had the exact same issue and none of the solutions worked for me.我遇到了完全相同的问题,但没有一个解决方案对我有用。 Instead adding the following line in the (homepage).html under <head> fixed it.而是在<head>下的 (homepage).html 中添加以下行来修复它。

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

I ran into this issue today.我今天遇到了这个问题。 I found an solution on GitHub that does not require going to a later version of the beta.我在 GitHub 上找到了一个解决方案,不需要转到更高版本的测试版。

Add the following script to your html:将以下脚本添加到您的 html:

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

This resolved the problem for me.这为我解决了问题。 For more details, you can follow the github issue here: https://github.com/angular/angular/issues/7144有关更多详细信息,您可以在此处关注 github 问题: https : //github.com/angular/angular/issues/7144

As of Feb 2017截至 2017 年 2 月

Using an Angular-Cli project, all lines in the polyfills.ts file were already uncommented so all polyfills were already being utilised.使用Angular-Cli项目, polyfills.ts文件中的所有行都已取消注释,因此所有 polyfill 都已被使用。

I found this solution here to fix my issue.我在这里找到了这个解决方案来解决我的问题。

To summarize the above link, IE doesn't support lambda arrow / fat arrow functions which are a feature of es6 .总结一下上面的链接, IE 不支持es6 的一个特性lambda 箭头 / 胖箭头函数 ( This is if polyfills.ts doesn't work for you ). 这是如果 polyfills.ts 不适合你)。

Solution : you need to target es5 for it to run in any IE versions, support for this was only introduced in the new Edge Browser by Microsoft.解决方案:您需要针对es5才能在任何 IE 版本中运行,仅在 Microsoft 的新 Edge 浏览器中引入了对此的支持。

This is found under src/tsconfig.json :这是在src/tsconfig.json下找到的:

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

You'll need to adjust the polyfills.ts file for your target browsers by uncommenting the appropriate sections.您需要通过取消注释适当的部分来为您的目标浏览器调整 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';

For me with iexplorer 11 and Angular 2 I fixed all those above issues by doing 2 things:对于 iexplorer 11 和 Angular 2,我通过做两件事解决了上述所有问题:

in index.html add:在 index.html添加:

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

in src\\polyfills.ts uncomment:在 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';
  1. Un-comment some imports in the polyfill.ts file.取消注释 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';

Install npm Pacakages Notice there are some npm install commands in the comments.安装 npm 软件包 注意注释中有一些 npm install 命令。 If you are using an early version of Angular CLI, there may also be a third one.如果您使用的是早期版本的 Angular CLI,可能还有第三个版本。 For Angular CLI versions 7, 6, and 1.7 you need to run:对于 Angular CLI 版本 7、6 和 1.7,您需要运行:

npm install --save classlist.js npm install --save classlist.js

npm install --save web-animations-js npm install --save web-animations-js

now open IE and render your application and check :)现在打开 IE 并呈现您的应用程序并检查:)

EDIT 2018/05/15 : This can be achieved with a meta tag ;编辑 2018/05/15 :这可以通过元标记来实现; please add that tag to your index.html and disregard this post.请将该标签添加到您的 index.html 并忽略这篇文章。

This is not a complete answer to the question (for the technical answer please refer to @Zze's answer above ), but there's an important step that needs to be added:这不是问题的完整答案(有关技术答案,请参阅上面@Zze 的答案),但需要添加一个重要步骤:

COMPATIBILITY MODE兼容模式

Even with the appropriate polyfills in place, there are still issues with running Angular 2+ apps using the polyfills on IE11.即使有适当的 polyfills,在 IE11 上使用 polyfills 运行 Angular 2+ 应用程序仍然存在问题。 If you are running the site off an intranet host (ie. if you are testing it at http://localhost or another mapped local domain name), you must go into Compatibility View settings and uncheck "Display intranet sites in Compatibility View", since IE11's Compatibility View breaks a couple of the conventions included in the ES5 polyfills for Angular.如果您在 Intranet 主机上运行站点(即,如果您在http://localhost或其他映射的本地域名上测试它),您必须进入兼容性视图设置并取消选中“在兼容性视图中显示 Intranet 站点”,因为 IE11 的兼容性视图打破了 Angular 的 ES5 polyfills 中包含的一些约定。

在此处输入图片说明

As of September 2017 (node version=v6.11.3, npm version=3.10.10), this is what worked for me (thanks @Zze):截至 2017 年 9 月(节点版本=v6.11.3,npm 版本=3.10.10),这对我有用(感谢@Zze):

Edit polyfills.ts and uncomment the imports that are necessary for IE11.编辑polyfills.ts并取消注释 IE11 所需的导入。

More preciselly, edit polyfills.ts (located in the src folder by default) and just uncomment all lines required for IE11 (the comments inside the file explain exactly what imports are necessary to run on IE11).更准确地说,编辑polyfills.ts (默认位于src文件夹中)并取消注释 IE11 所需的所有行(文件中的注释准确解释了在 IE11 上运行所需的导入)。

A small warning: pay attention when uncommenting the lines for classlist.js and web-animations-js .一个小警告:取消注释classlist.jsweb-animations-js classlist.js要注意。 These commented lines have a specific comment each: you must run the associated npm commands before uncommenting them or processing of polyfills.ts will break.这些注释行都有一个特定的注释:您必须在取消注释之前运行相关的 npm 命令,否则 polyfills.ts 的处理将中断。

As a word of explanation, the polyfills are pieces of code that implement a feature on a web browser that do not support it.作为解释的话,polyfills 是在不支持它的 Web 浏览器上实现功能的代码片段。 This is why in the default polyfills.ts configuration only a minimal set of imports is active (because it's aiming the so-called "evergreen" browsers; the last versions of browsers that automatically update themselves ).这就是为什么在默认的 polyfills.ts 配置中只有最小的导入集是活动的(因为它的目标是所谓的“常青”浏览器;自动更新自己的浏览器的最新版本)。

I have an Angular4 application, even for me also it was not working in IE11 browser, i have done below changes, now its working correctly.我有一个 Angular4 应用程序,即使对我来说它也不能在 IE11 浏览器中工作,我已经完成了以下更改,现在它可以正常工作了。 Just add below code in the index.html file只需在index.html文件中添加以下代码

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

Just you need to uncomment these below lines from polyfills.ts file只是您需要从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';

These above 2 steps will solve your problem, please let me know if anything will be there.以上 2 个步骤将解决您的问题,如果有任何问题,请告诉我。 Thanks!!!谢谢!!!

If you have still problems that not all JavaScript functions are working add this line in your polyfills.如果您仍然遇到并非所有 JavaScript 函数都能正常工作的问题,请在您的 polyfills 中添加这一行。 It fixes the missing 'values' method:它修复了缺失的“值”方法:

import 'core-js/es7/object';

And this line fixes the missing 'includes' method:这一行修复了缺失的“包含”方法:

import 'core-js/es7/array'

我遇到了同样的问题,如果您在兼容性视图中启用了显示 Intranet 站点,则 polyfills.ts 将不起作用,您仍然需要按照说明添加以下行。

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

changing tsconfig.json改变tsconfig.json

"target":"es5",

solved my problem解决了我的问题

What worked for me is I followed the following steps to improve my application perfomance in IE 11 1.) In Index.html file, add the following CDN's对我有用的是我按照以下步骤来提高我在 IE 11 中的应用程序性能 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.) In polyfills.ts file and add the following import: 2.) 在 polyfills.ts 文件中添加以下导入:

import 'core-js/client/shim';

In polyfills.ts在 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`.

If none of the other solutions work for you, it's worth investigating the source of the problem.如果其他解决方案都不适合您,则值得调查问题的根源。 It may be than an npm module directly inserts ES6 code, which cannot be transpiled.可能是 npm 模块直接插入 ES6 代码,无法转译。

In my case I had the在我的情况下,我有

SCRIPT1002: Syntax error vendor.js (114536,27) at the following line: SCRIPT1002:以下行中的语法错误 vendor.js (114536,27)

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

I searched the node_modules folder and found from which file the line came.我搜索了node_modules文件夹并找到了该行来自哪个文件。 It turned out that the culprit was punycode.js which in it's 2.1.0 version uses ES6 directly.结果发现罪魁祸首是punycode.js ,它在 2.1.0 版本中直接使用了 ES6。

After I downgraded it to 1.4.1, which uses ES5, the problem was solved.我降级到1.4.1后,使用ES5,问题解决。

How to resolve this problem in Angular8如何在 Angular8 中解决这个问题

polyfills.ts uncomment import 'classlist.js'; import 'classlist.js';取消注释import 'classlist.js'; and import 'web-animations-js';import 'web-animations-js'; then install two dependency using npm install --save classlist.js and npm install --save web-animations-js .然后使用npm install --save classlist.jsnpm install --save web-animations-js安装两个依赖项。

update tsconfig.json with "target":"es5","target":"es5",更新tsconfig.json "target":"es5",

then ng serve run the application and open in IE, it will work然后ng serve运行应用程序并在 IE 中打开,它将起作用

  1. Uncomment IE section in the src/polyfill.js,取消 src/polyfill.js 中 IE 部分的注释,

    /** IE10 and IE11 requires the following for NgClass support on SVG elements*/ /** IE10 和 IE11 对 SVG 元素的 NgClass 支持需要以下内容*/

    import 'classlist.js';导入'classlist.js';

  2. If any build error for missing package then,如果丢失的包有任何构建错误,

    npm install classlist.js --save-exact npm install classlist.js --save-exact

  3. Make sure to include below line to set the default IE document mode.确保包含以下行以设置默认的 IE 文档模式。 Other wise it will open in version 7否则它将在第 7 版中打开

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

Step 1: Un-comment plyfills in polyfills.ts.第 1 步:取消注释 polyfills.ts 中的 plyfills。 Also run all npm install commands mentioned in in polyfills.ts file to install those packages同时运行 polyfills.ts 文件中提到的所有 npm install 命令来安装这些包

Step 2: In browserslist file remove not before the line where IE 9-11 support is mentioned第 2 步:在 browserslist 文件中删除提到 IE 9-11 支持的行之前

Step 3: In tsconfig.json file change like "target": "es2015" to "target": "es5"第 3 步:在 tsconfig.json 文件中将“target”:“es2015”更改为“target”:“es5”

These steps fixed my issue这些步骤解决了我的问题

I tried every solution in this thread as well as bunch from other ones, with no success.我尝试了这个线程中的所有解决方案以及其他解决方案中的一堆,但没有成功。 What ended up fixing this for me was to update every package in my project, including MAJOR version changes.最终为我解决这个问题的是更新我项目中的每个包,包括主要版本更改。 So:所以:

  1. Run npm outdated运行 npm 过时
  2. Update package.json with the number shown in the current column from results (this can break your project, be careful)使用结果中当前列中显示的数字更新 package.json(这可能会破坏您的项目,请小心)
  3. Run npm install运行 npm 安装
  4. Made sure I also had the polyfills uncommented as noted in the other answers.确保我也没有注释其他答案中提到的 polyfill。

That's it.就是这样。 I wish I could pinpoint which library was the culprit.我希望我能查明哪个图书馆是罪魁祸首。 The actual error I was getting was "Syntax Error" in vendor.js in Angular 6.我得到的实际错误是 Angular 6 中 vendor.js 中的“语法错误”。

Angular 9 out of the box should work absolutely fine in IE11 now.开箱即用的 Angular 9 现在应该可以在 IE11 中正常工作。

I tried all of the suggestions listed here and none of them worked.我尝试了这里列出的所有建议,但没有一个奏效。 However I did manage to track it down to a specific library I was importing in app.module ( ZXingScannerModule to be precise).但是我确实设法将其跟踪到我在app.module中导入的特定库( ZXingScannerModuleZXingScannerModule )。 If your app is failing in IE11 on the first page, try removing libraries one at a time and check in IE11 - it was completely missed in all my build warning errors.如果您的应用程序在第一页上的 IE11 中失败,请尝试一次删除一个库并检查 IE11 - 在我的所有构建警告错误中完全错过了它。 If you do find this is the case, then consider compartmentalising the area of your site which uses this library as a lazy loaded module.如果您确实发现是这种情况,请考虑将您的站点区域划分为使用该库作为延迟加载模块的区域。

The latest version of core-js lib provides the polyfills from a different path.最新版本的 core-js lib 提供了不同路径的 polyfill。 so use the following in the polyfills.js.所以在 polyfills.js 中使用以下内容。 And also change the target value to es5 in the tsconfig.base.json并将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';

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM