Angular 2 / 4 / 5 not working in IE11-第2页回答

I am trying to figure out why my angular 2 app is stuck on showing Loading... when running in IE 11.

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..."

The plunker is : 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?

Thank you!

标签： angular typescript internet-explorer

14条回答

刘海飞了

2楼-- · 2019-01-02 15:34

For me with iexplorer 11 and Angular 2 I fixed all those above issues by doing 2 things:

in index.html add:

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

in src\polyfills.ts uncomment:

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

0人赞添加讨论(0) 举报

闭嘴吧你

3楼-- · 2019-01-02 15:36

As of Feb 2017

Using an Angular-Cli project, all lines in the polyfills.ts file were already uncommented so all polyfills were already being utilised.

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. (This is if polyfills.ts doesn't work for you).

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.

This is found under src/tsconfig.json:

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

0人赞添加讨论(0) 举报

谁念西风独自凉

4楼-- · 2019-01-02 15:38

As of September 2017 (node version=v6.11.3, npm version=3.10.10), this is what worked for me (thanks @Zze):

Edit polyfills.ts and uncomment the imports that are necessary for 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).

A small warning: pay attention when uncommenting the lines for classlist.js and web-animations-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.

As a word of explanation, the polyfills are pieces of code that implement a feature on a web browser that do not support it. 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).

0人赞添加讨论(0) 举报

浪荡孟婆

5楼-- · 2019-01-02 15:40

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.

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

0人赞添加讨论(0) 举报

栀子花@的思念

6楼-- · 2019-01-02 15:42

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.

In my case I had the

SCRIPT1002: Syntax error vendor.js (114536,27) at the following line:

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

I searched the node_modules folder and found from which file the line came. It turned out that the culprit was punycode.js which in it's 2.1.0 version uses ES6 directly.

After I downgraded it to 1.4.1, which uses ES5, the problem was solved.

0人赞添加讨论(0) 举报

荒废的爱情

7楼-- · 2019-01-02 15:44

I ran into this issue today. I found an solution on GitHub that does not require going to a later version of the beta.

Add the following script to your 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

0人赞添加讨论(0) 举报

Angular 2 / 4 / 5 not working in IE11

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间