Angular Routing Causes Infinite Loop In IE

Question

I am receiving the following error when I look at my code in Internet Explorer 10 (it does not necessarily render in standards mode, this is out of my control due to the way the page is served).

http://errors.angularjs.org/1.2.28/$rootScope/infdig

Here is the routing I've used:

phoneApp.config(['$routeProvider', '$locationProvider',
  function($routeProvider, $locationProvider){
    $routeProvider
      .when('/sap.com~home~phonelist/pages/index.html', {
        templateUrl: '/sap.com~home~phonelist/pages/landing.html',
        controller: 'SearchController'
      })
      .when('/sap.com~home~phonelist/pages/', {
        templateUrl: '/sap.com~home~phonelist/pages/landing.html',
        controller: 'SearchController'
      })
      .when('/sap.com~home~phonelist/pages/singleEmployee/:id', {
        templateUrl: '/sap.com~home~phonelist/pages/singleEmployee.html',
        controller: 'SingleEmployeeController'

      });

      $locationProvider.html5Mode(true);
  }]);

The base href in my index: <base href="/" /> and also the only repeat in the page:

<tr ng-repeat="employee in filteredEmployees = (employees | filter:search.currentFilter | orderBy:user.ordering:reverse)">
    <td> <a class="fakeLink" href="singleEmployee/{{$index}}">{{ employee.name }}</a></td>
    <td class="location">{{ employee.userID }}</td>
    <td class="district">{{ employee.department }}</td>
    <td class="jobTitle">{{ employee.jobTitle }}</td>
    <td class="emailAddress">{{ employee.email }}</td>
    <td class="workPhone"><a class="fakeLink" href="tel:{{employee.phone}}">{{ employee.phone }}</a></td>
</tr>

The page loads fine in Chrome, but when I try to pop it open in IE nothing loads. I've checked my html on the ng-repeat to make sure that I'm not calling a method that creates new arrays. The base href seems to be called endlessly when I inspect with developer tools. Any thoughts on what might be causing this error?

I think ``$locationProvider.html5Mode(true);`` is the problem! Does it work, if you set it to ``false``? — Betty St, Jun 16 '15 at 20:39
you may need to use `hasPrefix` like `$locationProvider.html5Mode(true).hashPrefix('!');` which you will need it for ie8 & ie9 — Pankaj Parkar, Jun 16 '15 at 20:41
@BettySt changing it to false does not work and breaks it in chrome @pankajparkar adding `hashprefix(`!`) doesnt make a difference. — Ragnyll, Jun 16 '15 at 20:55
Bad news. IE9 do not support HTML5 History API. That is what angular html5Mode uses. If you need your app to run on IE9 you need to switch back, @see http://stackoverflow.com/questions/22763599/ie-9-not-supporting-locationprovider-html5mode — Betty St, Jun 16 '15 at 20:59

score 0 · Accepted Answer · answered Jun 17 '15 at 14:43

This is a combination of 2 issues. Number one, change

$locationProvider.html5Mode(true);

to

$locationProvider.html5Mode(false);

Betty in the comments is correct, there is an issue with IE using this for older versions. In addition to this, you need to create a new route for just /. If you're having issues with angular routes kicking in, you can call otherwise in addition to when for setting up your routes. There's more information on that style of routing in the angular documentation.

Angular Routing Causes Infinite Loop In IE

1 Answers1

Linked