What is required to use Angular 2 within IE9?

I've been trying to create an Angular 2 application (using the get started guide) as a template but while it works really well in Chrome I'm struggling to get it working in IE9!

Basically the app is failing while loading/running boot/js with the following error reported to the developer console..

LOG: Error: Object doesn't support this action

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

The start of my index.html looks like the following...

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

With the Angular code following https://angular.io/guide/quickstart to the letter!

Update 1: With a bit more testing (mostly in newer IE browsers) I am experiancing the same issue but seeing 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)

The index.html currently 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>

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 routing method to '#'

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

Don't use browser history to navigate:

window.history.back(); //BAD

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

it turns out it was human error!!

I had copy/pasted the wrong links from the cloudflare CDN site, referencing es6-sham.js instead of es6-shim.js

Such a small typo - but with massive consequences!

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

Maybe reference in your ployfills.ts to import library on build:

import 'ie-shim';

Probably a good idea to include it before zone.js import.

Add this lines of code just after your <head> in index.html

Note: Order must be 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>

happymeal

I'm 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 had expected the core-js shim to provide full support for IE9 too but it was still missing some functions. Adding shims_for_IE seemed to work well.

With regards to routing in IE9, the following answer was helpful: How to bootstrap with HashLocationStrategy in Angular 2 RC5

来源：https://stackoverflow.com/questions/34775684/what-is-required-to-use-angular-2-within-ie9

标签

angular

internet-explorer-9