Note: This post was written during Angular’s beta phase. The issue is fixed in later versions of Angular 2.
Starting from Beta 1, Angular 2 applications don’t seem to run in Internet Explorer anymore—although Angular 2 officially supports Internet Explorer versions 9 to 11 and it worked like a charm in Beta 0. This is due to missing ECMAScript 2015 (ES6) shims which es6-shim doesn’t include. This can be easily solved by adding the missing shims which are buried deep in Angular’s package.
The problem
You can open Internet Explorer’s JavaScript console by pressing F12 and navigating to the Console tab.
On Internet Explorer 9, window.requestAnimationFrame is missing. Thus, you should see the following error message:
EXCEPTION: Error during instantiation of function BrowserDetails() {! (Token Promise -> function DynamicComponentLoader() {} -> function AppViewManager() {} -> function RootRenderer() {} -> function DomRootRenderer(document, eventManager, sharedStylesHost, animate) { -> function AnimationBuilder(browserDetails) { -> function BrowserDetails() {).
ORIGINAL EXCEPTION: TypeError: Object doesn't support property or method 'requestAnimationFrame'
On Internet Explorer 10 and 11, the Function.name method is missing which leads the TemplateCompiler to crash. On these versions of Internet Explorer, you should see the following message:
EXCEPTION: SyntaxError: The use of a keyword for an identifier is invalid STACKTRACE: SyntaxError: The use of a keyword for an identifier is invalid at evalExpression (…) at TemplateCompiler.prototype._createViewFactoryRuntime (…) at Anonymous function (…) at Zone.prototype.run (…) at Anonymous function (…) at zoneBoundFn (…) at lib$es6$promise$$internal$$tryCatch (…) at lib$es6$promise$$internal$$invokeCallback (…) at Anonymous function (…) at Anonymous function (…)
The solution
Please note: As of March 7, 2016 this issue is still open, so the solution presented here may not be the final one.
Internet Explorer needs the following three scripts (in this exact order) to run Angular 2 apps properly. If the third script (shims_for_IE.js) is missing, your app won’t run, but fail for one of the reasons noted above.
<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>
It’s as easy as pie. Now it’s your turn! Get your app working again in Internet Explorer 9, 10 and 11.
The logos of AngularJS and Angular 2 are licensed under the CC BY-SA 3.0 Unported License. The Angular 2 artwork is licensed under the CC BY 4.0 Unported License.
