Angularjs error in IE 7 Object doesn't support property or method 'querySelector'

Question

I am introducing angularjs in an existing asp.net project and there are many statements in the project which will work only in IE 7 compatibility mode but when i run the project i am getting following error from angularjs file

Object doesn't support property or method 'querySelector'

after a little R&D on the issue, i figured querySelector was introduced only from IE 8.

Now how can i make my application work in IE 7 with angularjs.?

i dont want to set the meta tag for more than ie 7 as my existing application has dependency on ie 7 which will not work in ie 8 and above.

i tried to configure angular module disabling SCE as follows:

var rtApp = angular.module("realTimeNotifications", []).config(function($sceProvider) {
    // Completely disable SCE to support IE7.
    $sceProvider.enabled(false);
});

but still no luck.

Thanks in advance.

See accepted answer in: [**Running AngularJS App on Internet Explorer 7**](http://stackoverflow.com/questions/15914675/running-angularjs-app-on-internet-explorer-7) -- it mentions bootstrapping, though in general, as you already said, as [**querySelector**](https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector) is not supported you might also in addition scale back on the version of AngularJs to one "more" compatible with IE7. -- In addition see [**Dealing with IE family**](http://ng-learn.org/2013/12/Dealing-with-IE-family/), specially section on supporting IE 7. — Nope, Sep 12 '14 at 15:22
i have tried that bootstrapping, but no luck as the issue is with querySelector object — Alagesan Palani, Sep 12 '14 at 15:25
I linked another article in the comment that focuses on dealing with IE specifically and it has a whole section at the bottom, mentioning shivs, polly-fills and so on. Hope that will help somehow. — Nope, Sep 12 '14 at 15:28
You can use _jQuery_ to add `document.querySelector/All(selector)` using `$(document).find(selector)`, but IE7 does not support HTMLElement.prototype, so you can't add them to other elements. Why do you need to support IE7 anyway? — Paul S., Sep 12 '14 at 15:33

score 0 · Accepted Answer · answered Sep 25 '14 at 13:51

I have also been struggling with IE7 and IE6 compatibility, and have discovered that using angularjs version 1.1.5 instead of 1.2.25 prevents the error you describe.

Whether angular is usable in IE6 and IE7 beyond this simple example is another matter.

The code below has been tested in IE6,7,8,9,11 on a domain with compatibility mode set to ON.

I assume many parts of the example can be omitted. I am just starting out with angular, so cannot guarantee best practices are used. It should at least provide a starting point.

<!DOCTYPE html>
<html class="ng-app:phonecatApp" ng-app="phonecatApp" id="ng-app" xmlns:ng="http://angularjs.org" lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE; IE=9; IE=8; IE=7" />
    <meta charset="utf-8">
    <title>My HTML File</title>
    <link rel="stylesheet" href="../stylesheets/html5.css">
    <!--[if lte IE 7]>
        <script src="../Includes/Client/JS/json2.js"></script>
    <![endif]-->

    <!--[if lte IE 9]>
        <script type="text/javascript" src="es5-shim-4.0.3-min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="html5shiv.min.js"></script>
    <script type="text/javascript" src="angular-1.1.x.js"></script>

    <script type="text/javascript">
        var phonecatApp = angular.module('phonecatApp', []);

        phonecatApp.controller('PhoneListCtrl', function ($scope) {
          $scope.phones = [
            {'name': 'Nexus S',
             'snippet': 'Fast just got faster with Nexus S.'},
            {'name': 'Motorola XOOM™ with Wi-Fi',
             'snippet': 'The Next, Next Generation tablet.'},
            {'name': 'MOTOROLA XOOM™',
             'snippet': 'The Next, Next Generation tablet.'}
          ];
        });
    </script>
</head>
<body ng-controller="PhoneListCtrl">

    <ul>
        <li ng-repeat="phone in phones">
            {{phone.name}}
            <p>{{phone.snippet}}</p>
        </li>
    </ul>

</body>

Angularjs error in IE 7 Object doesn't support property or method 'querySelector'

1 Answers1