Ui-router returns: "Unable to GET / page"

I am using ui-router and have a profile state that looks like this:

 .state('profile', { url: "/profile", templateUrl: "views/profile.html", controller: 'ProfileCtrl', resolve: { currentUser: function(gamAuth){ return gamAuth.checkCurrentUser(config.userRol.user) } } 

When I try to reload / refresh the page, I get the following message:

 Cannot GET /profile 

The problem does not occur when I load my "landing page" at: http://localhost:9000/ , which has the following state in $stateProvider :

 .state('home', { url: "/", [...] }) 

I use: $locationProvider.html5Mode(true);

I tried providing an absolute url as suggested in the Decision Tree here

I also tried a number of suggestions found on the Internet, the most popular of which is something in this direction (putting it in the app.run() section):

 $state.transitionTo($state.current, $stateParams, { reload: true, inherit: false, notify: true }); 

All approaches have been tested with the <base href="/"> present in the <head> my index.html . Thank you for your time.

+6
source share
2 answers

you need to enable html5mode to true if you want to use your url without the '#' prefix.

Also you need to add your modRewrtie as mentioned here

Prerequisite:

 npm install --save-dev connect-modrewrite 
+2
source

When you have html5Mode enabled, the # character will no longer be used in your URLs. The # character is useful because it does not require server-side configuration. Without #, the URL looks much nicer, but also requires server side rewriting.

for more details on Rewrites settings:

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

+1
source

Source: https://habr.com/ru/post/978122/


All Articles