I recently had the joys of getting an AngularJS app I had created, working with IE9, and then subsequently IE8. If you haven’t had to do this, be happy. If you don’t have to ever do this, be even more happy. Internet Explorer will break your app from working correctly, for some very simple things. I wanted to post this to save people from the hours I had to spend, to finally track down the problems.
My initial plan of attack was to go to the AngularJS IRC Channel (#angularjs on freenode), I got responses like:
The best way to support IE8, is to show an alert that says to upgrade to IE9.
If you have to support an SPA in IE8, get a new job.
Even if tongue in cheek, none of them were helpful. The AngularJS docs on IE support were helpful in at least showing me the different things that I needed to incorporate into my application to prevent IE from freaking out on the custom tags and to use everything as attributes on existing html tags, rather than having AngularJS elements.
So here’s my run down of what had to be done in order to get this app to run in both IE9 and IE8:
- No HTML5 tags (will break IE8)
- Be sure there are no console.log statements ANYWHERE. (will break IE9)
- Make sure your custom directives are defined as new elements in the index page header. // document.createElement(‘my-directive’);
- I couldn’t get the AngularUI modal window to not throw an ‘unknown injector’ error in IE8, so I had to remove this functionality, and replace it with just an alert.
- You could have something to check the version of IE and use one set of JavaScript over another however. I just didn’t have time to do this.
- ng-include was breaking if any of the included parts had HTML5 tags.
- Careful how you do your routes. See more on this below.
I originally was using my own modified version of John Papa’s Hot Towel Angular build combined with the AngularJS Seed build. However, the way that Hot Towel Angular does it’s routes, would break IE8, and I again didn’t have time to try and debug it further. So, I had to modify this to the way the AngularJS Seed build does the routes.
Please let me know if there are any other items that could be added to the list above. And just know, that AngularJS 1.3 will be dropping support for IE8 altogether. (Windows XP and IE8 support officially end April 2014).