AngularJS routing services issues with different browsers

Issue

I just finished coding a new WEB project using AngularJS and Bootstrap. The development took place using Brackets, which launches Chrome for testing (while Brackets itself functions as the SERVER).

So far, everything works as required both when Brackets is used as the SERVER as well as when the whole project is deployed within a TOMCAT installation as long as the browser being used is Chrome and the machine is my computer.

Now, I started testing the project using different browsers and devices (e.g tablets, mobiles, etc.) and... OOPS!!! I am getting crashes all the time.

It would appear that the first issue is coming from the way I implemented and use the routing services (or, at least, this is what is suggested from several posts I found). Two things are happening (depending on the browser and the action triggered):

1. I received many times the error infdig,

2. When the user logs into the the system and a $window.location.href command is used to move to other page, all the user information stored within a $rootScope object disapears (strangely, this s not happening with Chrome, but it is with IE and Edge!).

Unfortunately, I was unable to fully understand what is the proper way of using the routing services.

The structure of the project is:

 [MyApp]                    -- This is the folder containing the whole project under TOMCAT's "webapps" folder
      index.html
      [pages]               -- Sub-folder hosting all the pages of the project except for the `index.html`
         page1.html
         page2.html
         :
         :

Transition to the sub-pages (page1.html, etc.) takes place using the $window.location.href = "#page1.html";, and the routing service is defined:

$routeProvider
    .when('page1.html', {
            templateUrl: '#/pages/page1.html',
            controller: 'Page1Controller'
    }
    .when('page2.html', {
            templateUrl: '#/pages/page2.html',
            controller: 'Page2Controller'
    }
    :
    :

From posts on this, I also tried:

    .when('page1.html', {
            templateUrl: 'pages/page1.html',
            controller: 'Page1Controller'
    }

and

    .when('page1.html', {
            templateUrl: '/pages/page1.html',
            controller: 'Page1Controller'
    }

getting errors in both cases (e.g. page not found).

Additionally, it is not clear to me what is the impact of including the statement $locationProvider.html5Mode(true); (when including this, I got an injection error).

I am seeking a simple and straightforward explanation on how to properly use this service, and if and how to set HTML5 mode.

Solution

After some struggle, I was able to fix things. Here is a summary of the issues and their solutions for those that might encounter the same situations.

• Different filename case in different OSs: As presented in the body of the original question, the development took place using Brackets (Great tool!!!) running on Windows. As everybody knows, windows is case-insensitive as far as filenames is concerned. As such, if you have a page named abc.html and you invoke it as Abc.html, the page WILL be found. This is not the case in Linux and hence, once I reviewed all the references and synchronized all the names, this pare of the issue was resolved.

• Correct usage of `$location' service: In my code there were many inconsistencies in the way I was using this service.

The correct (at least for me) way of using the routing services is as follows:

• In the Route Provider section, make sure that you have entries for all the pages you are directing to, like:

   .when ('/Demos', { 
             templateUrl: 'pages/Demos.html' ,
             controller:  'DemosController'
    })
  

• Then, when redirecting, use the syntax:

   $location.path('/Demos') ;
  

Once these issues were resolved, my application was tested with Firefox, IE, Edge, Chrome and Safari and, except for differences in the way the browser presents certain fields (like datetime picker), the behavior in all is identical (if we ignore performance differences when using IE).

Answered By - FDavidov