Angular UI-Router Not Resolving with Internet Explorer 9

Asked 18/3, 2015 at 18:43 Answered 18/11, 2016 at 4:14

angularjs internet-explorer-9 angular-ui-router

I have an Angular v1.3 application, which uses Angular ui-router v0.2.13 for all routing. The site works great on all browsers, including IE 10 and IE 11, but not IE 9 (we've decided not to pursue IE8, which I understand isn't supported by v1.3, anyway). Despite my best efforts, IE 9 continually resolves to my $stateProvider's otherwise route (which is set to /*path, a possible culprit, so I disabled that route for testing purposes).

In an attempt to get any other route to resolve, I've tried setting $locationProvider.html5Mode(false), modified the $locationProvider.hashPrefix, changed the <base href="/" /> to various URLs, including <base href="/#!"/>, and I've even included xmlns:ng="http://angularjs.org" in the <html> tag for good measure. No matter what I try, IE 9 continually tries to resolve to my otherwise route, or nothing if that route is disabled. BTW, my home page route URL is set to /.

I've been up to my eyeballs in code with a launch deadline looming, so I'll be the first to admit that I'm potentially overlooking something obvious. Can anyone offer any other tips or tricks to cause ui-router to resolve properly in IE 9?

Abuttals answered 18/3, 2015 at 18:43 Comment(0)

We use something like the following:

<!DOCTYPE html>
  <html lang="fr" xmlns="http://www.w3.org/1999/xhtml" ng-csp xml:lang="fr-CA">

//...
var app = angular.module('YourApp', [...]);
angular.bootstrap(document, ['YourApp'], {strictDi: true})

//...
    angular.module('YourApp').config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
  function ($stateProvider, $urlRouterProvider, $locationProvider) {
    $locationProvider.html5Mode(false);
    $locationProvider.hashPrefix('!');

    $urlRouterProvider.otherwise('/');

    $stateProvider
      .state('home', {
        url: '/',
        cache: false,
        controller: 'HomeController as vm'
      })
      .state('anon', {
        url: '/info',
        controller: 'AnonController as vm'
      })

//etc...

Stasny answered 10/2, 2016 at 18:0 Comment(0)

For me, IE9 routes correctly for hash urls, /#/example, but visiting / would resolve to the otherwise route. I worked around this by using a function for otherwise, and checking the url in it.

$urlRouterProvider.otherwise(function($injector){
    var state = $injector.get('$state');
    var location = $injector.get('$location');
    if (!location.url()) {
        // handle HTML5 fallback / IE9 when url has no hash
        return state.go('home');
    }
    state.go('404');
});

Cholent answered 18/11, 2016 at 4:14 Comment(0)

Recommended topics

Hot tags