Could not get the pages while refreshing the browser using ui-router Angular.js

Question

I need some help.I am facing some issues. I could not get the pages after refreshing again using Angular.js. I am explaining my code below.

route.js:

var app=angular.module('demo',['ui.router']);
app.run(function($rootScope, $state) {
      $rootScope.$state = $state;
    });
compliance.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
    .state('/', { 
        url: '/',
        templateUrl: 'View/demo1.html',
        controller: 'demoController'
    })
    .state('demo2', { 
        url: '/demo2',
        templateUrl: 'View/demo2.html',
        controller: 'demo2Controller'
    })
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: true
    });
});

index.html:

<div  ui-view></div> 

demo1.html:

demoController.js:

$scope.goToAuditDetailPage=function(){
    $state.go('demo2',{}, { reload: true });
}

Here when user will open the link http://localhost/NABH/ the demo1.html page will come and inside that page there is one click event, when user will click on that link the demo2.html page is coming and the URL is http://localhost/NABH/demo2 . But In this case when user will refreshing that link http://localhost/NABH/demo2 again this The requested URL /NABH/demo2 was not found on this server. error is coming. Here I need after refreshing also that page should work as per expected.Please help.

Answer 1

You are using html5mode with your routes, therefore the browser changes the routes of your app as they are come from the server, when ever the user press on the refresh button, the browser sends a request with your client route, and your server doesn't aware of it.

One of the simplest solution is to make the server "answer" to all the routes with your client app, in that way, the request with your client rout with be answered with index.html shell (as it answered when you navigate to / ), and the client app will check the current route and render the proper page (it's done automatically).