Angular.js: AngularJs (all versions) breaks on IE11 in document mode ie=8

Created on 24 Sep 2013 · 24Comments · Source: angular/angular.js

Hello,
due to restrictions with legacy applications, my angularjs app is loaded in an iframe. The surrounding website has the document mode ie=8. <meta http-equiv="X-UA-Compatible" content="IE=8" />

So every website that is loaded within the iframe is also rendered in the ie8 documentmode.

Unfortunately Angular Js doesn't work in Internet Explorer 11 with the document mode ie=8 as described above.

I made a very simple example (see below) where this problem also occurs. It's based on an example of angularjs.org.

If you change the document mode e. g. to <meta http-equiv="X-UA-Compatible" content="IE=9" /> the example works.

This problem seams to appear in all angularjs versions. I tried 1.0.3, 1.0.8, 1.1.5 and 1.2.0-rc.2.

I hope you can help me.

Best regards
Bernd Hartmann

Sorry for the code here, but I didn't get the document mode run in an jsfiddle or Plunker.

1.) ie11testappframe.html

<!doctype html>
<html>
<head>
<title>AngularJs IE11 Test App Host</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<style type="text/css">
iframe{
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<h1>AngularJs IE11 Test App Host</h1>
<p>below you see the iframe, where an angular js app is loaded</p>
<iframe src="ie11testapp.html">

</iframe>

</body>
</html>

2.) ie11testapp.html

<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
</head>
<body>
<div><label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1></div>
</body>
</html>

low investigation more info

Source

derbernd86

Most helpful comment

just add below tag inside your head, it works like charm. IE=11 is the version of IE.

 <meta http-equiv="X-UA-Compatible" content="IE=11" />

jilanirony on 7 Sep 2015

👍9

All 24 comments

Would this be related to https://github.com/angular/angular.js/pull/4119?

petebacondarwin on 24 Sep 2013

When I tried this in IE10, it initially told me that the website was trying to run an ActiveX control. When I clicked allow then it all worked fine.

petebacondarwin on 24 Sep 2013

Thank you for your response. In IE10 I got the same behaviour. But IE11 doesn't work at all.
This Bug is critical to me. Do you reflect those problems to Microsoft's IE11 team?
Is there a workaround or a simple bugfix to this issue?

derbernd86 on 25 Sep 2013

OK, so the problem is that in angular.forEach: https://github.com/angular/angular.js/blob/master/src/Angular.js#L140
There is a call to obj.hasOwnProperty(key). IE11 in IE8 mode is saying that the obj, which is a DispStaticNodeList object, does not have this method!
It may be that the changes in https://github.com/angular/angular.js/pull/3331 will fix this.

petebacondarwin on 25 Sep 2013

Thank you for your answer!
I changed the code of the angular.ForEach in https://github.com/angular/angular.js/blob/master/src/Angular.js#L140

Instead of obj.hasOwnProperty(key)
I changed it to Object.prototype.hasOwnProperty.call(obj, key)
This works for me, but I'm not sure if there are other situations where IE11 documentMode ie8 breaks relying on hasOwnProperty-Method.

I didn't find this change in your fix #3331?

derbernd86 on 26 Sep 2013

🎉2 👍1

Hmm, yes, the trouble is that Object.prototype.hasOwnProperty.call(obj, key) is orders of magnitude slower that just calling obj.hasOwnProperty(key) and so my PR tried hard not to change "hot" code.
I think that your situation is so specialized that we cannot implement such a change throughout the core just for it.
I suggest that you have your own fork of the project, where you do a simple search and replace for ".hasOwnProperty(". This should fix your problem.

petebacondarwin on 26 Sep 2013

👍1

The error is within the angularInit function, which is using foreach to iterate over the list of dom elements returned from element.querySelectorAll()
IE8 only supports querySelectorAll in standards mode, so this code won't be reached if using IE8 in quirks mode or IE7 compatibility mode. Adding an additional check for element.hasOwnProperty should bypass this code, which shouldn't be needed for IE8 as it's getting the app root by id.

Also, the consoleLog needs to check for typeof logFn === "function". IE8 throws an error on the check for console.log.apply, and IE7-8 returns typeof "object" for methods on the console object.

mvcninja on 17 Dec 2013

I had the same issue but was solved when I used ngularJS v1.2.14.

orias407 on 4 Mar 2014

I tried this with 1.2.14 and 1.3.0 in IE with and without setting X-UA-Compatible.
It does not appear to be fixed to me.

pdorrestijn on 16 Oct 2014

Same issue here. 1.2.0, with X-UA-Compatible we get the error mentioned. Without X-UA-Compatible it does not render the page and we get no console logs.

oliverbenns on 24 Oct 2014

Perhaps you might like to put together a PR with the fix suggested in https://github.com/angular/angular.js/issues/4137#issuecomment-30783476 ?
If you can prove it works with tests then it can go into the next 1.2 release.

petebacondarwin on 18 Nov 2014

just add below tag inside your head, it works like charm. IE=11 is the version of IE.

 <meta http-equiv="X-UA-Compatible" content="IE=11" />

jilanirony on 7 Sep 2015

👍9

jilanirony
just add below tag inside your head, it works like charm. IE=11 is the version of IE.

This worked for me and saved my deadline!

Additionally, IE11 refused to fetch libraries that it didn't "trust" such as

http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js

So i just copied them local. Off to the races!

Thanks Mr. Irony!

ppsgppsi on 11 Dec 2015

😕1 👍1

Also running into this problem myself.
IE11 document mode 8 just says "Module" is undefined...

MarkPieszak on 13 Jan 2016

Instead of obj.hasOwnProperty(key)
I changed it to Object.prototype.hasOwnProperty.call(obj, key)
This works very fine for me

vishnuandroid on 2 May 2016

Hello,
I am facing,angular2 project not work in IE Brower issue. Any one Please me to resolve this issue.

mohitqservice on 27 Sep 2016

@mohitqservice This is for AngularJS (Angular1)

MarkPieszak on 27 Sep 2016

@petebacondarwin I am facing an issue with 'data-content' attribute ONLY in IE(just tried IE11).
AngularJS expression is not getting resolved in IE and is perfectly working in chrome and firefox,
data-content="{{::someCtrl.someArray['sometext']}}"
Any ideas are highly appreciated.
Thanks!!

CoolSuplex on 23 Jan 2018

👍1

@CoolSuplex - you problem does not seem related to this issue. Please open a new issue with a full reproduction of the problem if you feel it is a bug in AngularJS.

petebacondarwin on 25 Jan 2018

In an Angular app, how do I put <meta http-equiv="X-UA-Compatible" content="IE=11" /> below the head?

ps: I am learning to code. Thank you.

shaareable on 8 Apr 2018

Hi, you should put the meta tag in the main html file inside the head tag

parak80 on 5 Jul 2018

I am using angular cli/angular 5 in my app and it run in IE browser but there are some css/bootstrap that are not following with, like my navbar, some colors that described as default color for buttons: var(); etc. They are not showing. Anyone has solution for this?

parak80 on 5 Jul 2018

Hi,
I am facing this problem in IE11, I tried to set below the head, but the issue still exist som fiel are disabled on IE11 from the other side everything working correctly on edge.
Any idea how can I deal with this?