Geek Answers Handbook

What is required to use Angular 2 in IE9?

I'm trying to create an Angular 2 application (using the getting started guide) as a template, but while it works very well in Chrome, I try my best to get it working in IE9!

Basically, the application does not work when loading / starting boot / js with the following error reported to the developer console.

LOG: Error: object does not support this action

Does anyone have any recommendations or suggestions - even better - a demo that really works in IE9?

The beginning of my index.html is as follows:

<head> <title ng-bind="title">xxx</title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <base href="/"> <link rel="stylesheet" href="/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="/css/style.css" /> <link rel="stylesheet" href="/css/main.css" /> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.4.1/es5-sham.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.1/es6-sham.min.js"></script> <script src="/app/shims_for_IE.js"></script> <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script> <script src="https://code.angularjs.org/tools/typescript.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.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> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/boot') .then(null, function(err){ console.log(err); }); </script>

Using the Angular code following https://angular.io/guide/quickstart in the letter!

Update 1: With a little more testing (mainly in new IE browsers) I am experiencing the same problem, but see more details.

  TypeError: Object doesn't support property or method 'keys' at Anonymous function (http://localhost:5000/app/angular2.dev.js:783:5) at Anonymous function (http://localhost:5000/app/angular2.dev.js:781:3) at linkDynamicModule (https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system.src.js:3130:5) at getModule (https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system.src.js:3098:9) at Anonymous function (https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system.src.js:3134:9) at Anonymous function (http://localhost:5000/app/angular2.dev.js:10795:3) at linkDynamicModule (https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system.src.js:3130:5) at getModule (https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system.src.js:3098:9) at Anonymous function (https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system.src.js:3134:9) at Anonymous function (http://localhost:5000/app/angular2.dev.js:12011:3)

Currently index.html looks like.

 <head> <title ng-bind="title">xxx</title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <base href="/"> <link rel="stylesheet" href="/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="/css/style.css" /> <link rel="stylesheet" href="/css/main.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.4.1/es5-sham.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.1/es6-sham.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/typescript.js"></script> <script src="/app/reflect.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system.src.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.src.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="/app/angular2.dev.js"></script> <script src="/app/shims_for_IE.js"></script> <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/boot') .then(function(){ }, function(err){ console.log(err.stack); }); </script>

+6
source share
5 answers

Fix for Angular2 RC4 IE9:

  • Include script:

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

  • Change the routing method to '#'

import { LocationStrategy, HashLocationStrategy } from '@angular/common'; ... bootstrap(AppComponent, [ ..., { provide: LocationStrategy, useClass: HashLocationStrategy } ]);

  • Do not use browser history for navigation:

window.history.back(); //BAD

+5
source

So, after hours of pulling hair, talk here with @kevinB (thanks) and end up raising a ticket https://github.com/angular/angular/issues/6479#issuecomment-171582759

it turns out that it was a human error!

The wrong links from the cloud CDN site were copied / pasted from me, referring to es6-sh a m.js instead of es6-sh i m.js

Such a small typo - but with massive consequences!

+2
source

Add these lines of code immediately after <head> in index.html

Note: order must be the same

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

0
source

I am using Angular 2.4.0 and was able to get it to work with IE9 with the following pollyfills:

 <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script> <script src="node_modules/core-js/client/shim.min.js"></script>

I expected kernel-js-laying to provide full IE9 support, but some features are still missing. Adding shims_for_IE seemed to work well.

Regarding routing in IE9, the following answer was useful: How to boot using HashLocationStrategy in Angular 2 RC5

0
source

You can use the node ie-shim package , install on the command line using npm install ie-shim --save

Perhaps the link in your ployfills.ts to import the library in the assembly:

 import 'ie-shim';

It might be a good idea to enable it before importing zone.js.

0
source

More articles:


All Articles