How to get an AngularJS app working in IE8?

Question

I am trying to get my AngularJS app available on IE8. I am using AngularJS v1.2.16. Utilizing (http://www.browserstack.com/) to test, I can see that it all breaks down when I set my stack to be IE8. I am following this link from angular docs to get that app to work however, when I inject this line

<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="myApp">

the browser does not show any objects on the page (Only the header and footer shows) and still does not work on IE. This is because of this specific bit of code from above

ng-app="myApp"

I was wondering if this could be the cause that I cannot get my app to work on IE8. I have implemented all of the directions from directions provided by the link. However, I am not certain if I've completely fulfilled the document.createElement(); component either. What I did was to add all of the ng-... tags that I've used into the list as shown.

<!--[if lte IE 8]>
  <script>
    document.createElement('ng-include');
    document.createElement('ng-pluralize');
    document.createElement('ng-view');
    document.createElement('ng-click');
    document.createElement('ng-repeat');
    document.createElement('ng-show');

    // Optionally these for CSS
    document.createElement('ng:include');
    document.createElement('ng:pluralize');
    document.createElement('ng:view');
    document.createElement('ng:click');
    document.createElement('ng:repeat');
    document.createElement('ng:show');
  </script>
<![endif]-->

What could be the cause of the first issue and am I doing the second component correctly? Is there a better/simpler way to get my app functioning in IE8? If not how do I redirect/route them to a different view and lead them to upgrading their browser? Thanks.

EDIT1: Following KevinB's suggestion I used IE10 dev tools, switching to IE8 browser mode in order to see js errors, and I am getting these two error

SCRIPT438: Object doesn't support property or method 'addEventListener' 
jquery.js, line 3425 character 4
SCRIPT5022: Bootstrap's JavaScript requires jQuery 
bootstrap.js, line 7 character 38

Suggested by livepo this seems to be an error with jQuery (2.xx does not support IE8, must be 1.11.x).

Changed the jQuery versions to 1.11.1 and got rid of the errors but the views are still messed up. This is because of bootstrap compatibility with IE8.

Conclusion: This one questions lead to many different questions and so will open a new question for further discussion. Thank you for everyone's support on this.

Are you using an older version of AngularJS? the most recent version(1.3) has no support for IE8. — user400654
– user400654, Commented Oct 9, 2014 at 17:50
My guess is that guide is written for angular 1.2 and not 1.3 — user400654
– user400654, Commented Oct 9, 2014 at 17:51
@KevinB The most recent stable version (1.2.X) does. The most recent unstable version (1.3.X) does not. Luckily, the Angular guide explicitly mentions the differences in 1.3 and 1.2 that the OP hopefully noticed — Ian
– Ian, Commented Oct 9, 2014 at 17:52
@Jonathan Probably as long as MS supports Windows7, 14 Jan 2020? — Teemu
– Teemu, Commented Oct 9, 2014 at 17:58
Yup, jQuery 2.x is the culprit. you can safely switch that right over to 1.11.1 without worrying about conflicts. — user400654
– user400654, Commented Oct 9, 2014 at 18:44

Community · Accepted Answer · 2017-05-23 11:58:00Z

2

Hopefully this SO article will help. Why does ng-class="ng-app" break AngularJS?

It suggests to add class="ng-app:myApp" to the html tag. Please give the advice in this article a try and see if it helps.

Please be aware too, that the only reason you would need the document.createElement() calls is only if you are using custom tags, such as

<my-custom-tag></my-custom-tag>

Using

<div my-custom-tag></div>

will eliminate the need for that whole section.

EDIT: Forgot 'Code' sections

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Oct 9, 2014 at 18:03

dannypaz

1,2941 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

stcho Over a year ago

Hi livepo, I've tried your solution however still a no go. I am not seeing any errors in the console either.I am getting the same error Mike got in the linked thread. Quote- "That fixes the view problem in all browsers locally, but when I point to the server from another machine using IE (Chrome works fine remotely), my view just appears as an empty <ng-view/>. Also, all versions of IE are suffering from bizarre behavior, and when I try inspect elements they have these...

dannypaz Over a year ago

Hey stcho, he fixed the issue by adding <!doctype html> to the top of his page. Did you include that aswell? Quote - "Got it. Adding <!doctype html> got it to stop defaulting to Quirks Mode, the cause of most of my problems, and then I just had to fix a few random errors that weren't problems in the good browsers. Thank you for your help"

dannypaz Over a year ago

I just noticed your last comment. Looks to me like that is an error with jQuery (2.xx does not support IE8, you must use 1.11.x).

stcho Over a year ago

Ahh I see ok. Currently I'm using v2.1.1. I don't know if it'd be worth it to change jQuery's version to v1.x.x due to the fact that other libraries might be dependent on the newer versions of jQuery.

Blazemonger Over a year ago

jQuery 1.11 and 2.1 have the exact same API, the only difference is support for old IE versions. You should be fine.

|

Collectives™ on Stack Overflow

How to get an AngularJS app working in IE8?

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related