How to retain same page when browser is refreshed in Angular 1.5?

Question

In my project the router is set up like this :

   myApp.component("rsapproot", {
        transclude: true,
        template: "<ng-transclude></ng-transclude>",
        $routeConfig: [
            { path: "/login", component: "rsapplogin", name: "Login" },
            { path: "/tenant", component: "rsapptenantid", name: "Tenant" },
            { path: "/my-dashboard", component: "rsappmyrdash", name: "MyDash" },
            { path: "/my-reports", component: "rsappmyreports", name: "AppReports"},
            { path: "/equipment-details/:type/:id", component: "rsequipmentdetails", name: "EquipmentDetails" },
            { path: "/my/resources", component: "rsappresourceslist", name: "AppResourceList" },

Now expected behaviour after F5 or when pasting URL is, respectively, having current path reloaded or navigating to the said path, instead the initial application path is loaded.

I know that in order to retain the page after reload app, a url representing the path should be given.

But that thing is already there and the paths respectively are all unique.

Then what am I missing ?

Answer 1

This needs to be handled on the server side. Here's an example that illustrates the current problem:

You load the app at its initial path / and then navigate to /login . When you refresh the page, your web browser then sends a GET request to http://yourdomain.com/login which (I'm assuming) does not not respond by sending your Angular app (index.html) to the client.

You need to configure your server to respond to GET requests for all of your specified Angular paths with your index.html. This is often done with a catch-all route /* instead of specifying each route individually.