CODEWITHSUNDEEP
javascriptangularjsinternet-explorerinternet-explorer-8
stcho
stcho

Reputation: 2119

How to get an AngularJS app working in IE8?

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.

Upvotes: 1

Views: 3734

Answers (1)

dannypaz
dannypaz

Reputation: 1294

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

Upvotes: 2

Related Questions