We are currently looking for an advice or help on how can we solve our current issue on IE 9. We have a Web App like YouTube created from AngularJS and Laravel. The Web App can be opened and working very fine both in Firefox and Chrome but its not working on IE 9. It just displays a webpage and I notice the following:
Firefox and Chrome URLL: https://a.b.c/tube/index.php/login?
IE 9 URL: https://a.b.c/#/tube/index.php/login
The IE9 URL inserted # character into the URL.
Our AngularJS code is:
loginApp.config(function( $routeProvider, $locationProvider ) {
$locationProvider.html5Mode(true);
$routeProvider.when('/tube/index.php/login', {
controller: 'LoginController',
templateUrl: '../js/partials/login.html'
}).when('/tube/index.php/admin', {
controller: 'LoginController',
templateUrl: '../js/partials/admin.html'
}).otherwise({ redirectTo: '' });
});
angular.bootstrap( document.getElementById('loginApp'), ['loginApp'] );
There is no error in IE 9 and below is the IE 9 loading when you try to check it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META content="text/html; charset=shift_jis" http-equiv="Content-Type">
</HEAD>
<BODY></BODY>
</HTML>
Please help us on this matter as 61% of our users use IE 9. We also have no options to upgrade to higher versions of IE.
Microsoft shipped support for the History API with Internet Explorer 10. Prior versions of IE would need to use the fragment-approach instead for single-page applications.
See Using $location in the AngularJS documentation for more information.