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

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?

localhost:8080

localhost:8080/user/list

1 Answer
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.

localhost:8080/user/list

/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.

localhost:8080/user/list

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy