Manual navigation doesn't work in ui-router for AngularJS 1.7

Question

I have the following state configuration:

function stateConfig($stateProvider) {
    $stateProvider
        .state("home", {
            url: "/",
            templateUrl: "/app/home/template/home.html",
            controller: "HomeController as homeController"
        });
        .state("user", {
            abstract: true,
            url: "/user",
            template: "<ui-view/>"
        })
        .state("user.list", {
            url: "/list",
            templateUrl: "/app/user/template/user.list.html",
            controller: "UserListController as userListController"
        });
}

user.list.html contains a table of users, home.html constains the link to the user.list.html:

<a class="btn btn-primary" ui-sref="user.list" role="button">View All Users</a>

When I start the application and go to the localhost:8080, it displays me home.html. Then, when I click on the button "View All Users", it displays me user.list.html and I see a table of users. Evething works fine, but the problem starts when I try to reload the page (pressing F5) or when I manually navigate to the localhost:8080/user/list. It displays me 404 error page. My question is: why this is happening?

Prashant Pimpale · Accepted Answer · 2018-09-16 11:54:41Z

1

This has nothing to do with AngularJS but your web server. You need to configure the server you are using to route 404 errors to your home.html. When you request localhost:8080/user/list your server does not find a resource for /user/list.

Think of what happens when you load localhost:8080. You get home.html and your AngularJS app is initialised. When your change the route from localhost:8080 to localhost:8080/user/list the route handler from ui-router fires. No http request is sent to the web server. When you manually type the route or hit F5 you send a http request to the web server looking for the resource /user/list which does not exist on the server so you get a 404 not found error. You need to configure 404 errors to load home.html which will load up the AngularJS app.

edited Sep 16, 2018 at 11:54

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

answered Sep 16, 2018 at 8:36

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

not a Programmer Over a year ago

When I go to the localhost:8080 , I'm getting index.html and 'home' state initialized that populates index.html with home.html partial view (it's not full html page with html, head and body tags)

not a Programmer Over a year ago

I'm using Spring framework (which accordings to the Java language) on the backend.

Adrian Brand Over a year ago

Then serve up index.html on 404s

Adrian Brand Over a year ago

Sorry I have never used Java or Spring Framework so I can't give you any pointers on configuration, but you need to get the Spring Framework to serve your index.html file for 404 errors. It should not be difficult, I have done this with both ASP.NET and NodeJS servers.

not a Programmer Over a year ago

Thank you for the idea what happens behind the scene;) I didn't think about it.

Collectives™ on Stack Overflow

Manual navigation doesn't work in ui-router for AngularJS 1.7

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related