"Object doesn't support property or method 'querySelector'" shows when accessing site by machine name in IE11

Question

I have an angularjs site deployed to IIS on a Windows Server 2012 R2 host inside my firewall. When I RDP into the server and, from there, navigate to

http://localhost/Foo 

in IE11, everything behaves as one would expect;my page is served to the browser.

But, when I attempt to browse

http://servername/Foo

in IE11, I get an error thrown from line 1016 of angular.js

"Object doesn't support property or method 'querySelector'"

This only occurs in Internet Explorer.
Everything tested out fine in Chrome as well as Firefox.

Does anyone have a clue as to why this is happening and what I can do to fix it?

Answer 1

The solution to this problem was to add the

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

tag as the first item in the Head.

The meta tag has to be the first tag in the head for IE to pick up edge mode; otherwise, it ignores the DOCTYPE that is supposed to instruct IE not to fall into quirks mode.

I had included the meta tag as an afterthought when I was deploying and had typed it in at the bottom of the head.

MSDN|Specifying Legacy Document Modes

The X-UA-Compatible header isn't case sensitive; however, it must appear in the header of the webpage (the HEAD section) before all other elements except for the title element and other meta elements.

The default Compatibility Settings in Internet Explorer cause IE to silently behave differently for internal sites and external sites.

Setting the X-UA-Compatible meta tag explicitly declares that browsers should be receiving your internal site in Edge mode without the requirement of administrating Compatibility Settings, but the header must be specified as the first tag in the head in order to have this effect.

Answer 2

Disable Compatibility view mode for your intranet and site that you're trying to access and this will solve your problem.