angular: All Angular 2 apps broken in Internet Explorer 11 after beta.0

All Angular beta.1 - beta.6 applications crash in Internet Explorer 11

Last working version was beta.0.

Looks like they die in TemplateCompiler.

Messages vary:

SyntaxError: The use of a keyword for an identifier is invalid
SyntaxError: Expected ';'

StackTrace seems always the same:

SyntaxError: ...
   at evalExpression (https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js:451:5)
   at TemplateCompiler.prototype._createViewFactoryRuntime (https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js:24364:9)
...

Try _any of the sample applications_ in the documentation including QuickStart. All of them are shimmed for IE11

Plunkers crash too. Try the QuickStart or Template Syntax plunkers

Discovered that beta.0 was the last working version by rolling the plunker index.html scripts back, version by version.

Tested with IE 11.103.10586.0 (update 11.0.28) in Windows 10.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 3
Comments: 35 (11 by maintainers)

Most upvoted comments

SCRIPT5009: ‘System’ is undefined

I am still facing this issue. I tried including whatever told

My index.html

<html>

<head>
    <title>RPortal</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- inject:js -->
    <script src="system.src.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
    <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
    <script src="vendors.min.js"></script>
    <script src="lib.bundle.js"></script>
    <script src="system-config.js"></script>
    <!-- endinject -->
</head>

<body>
    <app-root>Loading...</app-root>
    <script>
        System.import('main.js');
    </script>
</body>

</html>

In vendors.min.js, I bundled polyfills from

 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/map';
import 'core-js/es6/set';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

Please help me.

Please let me know if any information needed.

Sri276286 on Nov 18, 2016

We do not recommend those shims. We currently recommend core-js. Please see the latest package.json in the current QuickStart

wardbell on Jun 1, 2016

@Sri276286 You have already opened a separate issue, which is unrelated to this one. Please follow @ericmartinezr’s suggestion on moving your question to a support channel instead, as yours is not a bug report or feature request.

skreborn on Nov 18, 2016

Please update to latest (beta.7 as I write) and try again using all three of these IE related shims:

    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

or in plunker

    <!-- IE required polyfills, in this exact order -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
    <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

Report back if still not working.

Yes, it the testing shim is temporary. We hope to merge the two Angular-supplied shims in a beta coming soon.

wardbell on Feb 29, 2016

I still face the issue even though I tried all. Compatibility mode is off,ts target is es5, polyfills uncommented, meta tag added, shims. added. But, this time error appears for some underlying projects I referenced. This only happens with IE11. FF,Chrome,mobile browsers are all fine. (webpack) Anyone may check from following ghpg https://davutg.github.io/ng5BookMarkBestSeller/

davutg on Feb 18, 2018

I am using 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’;

I am not sure it will help everyone, but might do some one.

Cheers!

Manjunath-Siddappa on Dec 4, 2017

Duplicate of #6501.

We need to include Angular’s shims_for_IE.js. Apparently the other shim libraries don’t cover all of IE’s problems.

Workaround is to load it after the other IE shim scripts either from the npm package …

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

… or from the web from the following npmcdn :

 <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

When I tested, it resolved to:

 <script src="https://npmcdn.com/angular2@2.0.0-beta.6/es6/dev/src/testing/shims_for_IE.js"></script>

I’m pushing this to all the doc samples.

We shouldn’t be using npmcdn to get shims_for_IE.js. We should add shims_for_IE.js to https://code.angularjs.org/

wardbell on Feb 18, 2016