ui-router returns: "Cannot GET /page"

Question

I am using ui-router, and have a profile state that looks as follows:

.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 reload my 'landing page' at: http://localhost:9000/, which has the following state in $stateProvider:

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

I am using: $locationProvider.html5Mode(true);

I tried providing absolute URL as suggested in the Decision Tree here

I also tried a number of suggestions found online, the most popular being something along these lines (placing it in the app.run() section):

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

All approaches were tested with and without the <base href="/"> tag being present in the <head> of my index.html. Thank you for your time.

score 2 · Accepted Answer · edited May 23 '17 at 11:46

2

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

Also you need to add your modRewrtie in as mentioned here

Prerequisite:

npm install --save-dev connect-modrewrite

edited May 23 '17 at 11:46

Community

1
1

answered Nov 13 '14 at 08:44

CrazyGeek

3,397
2
24
38

I am using: `$locationProvider.html5Mode(true)` at the moment. Should it be done somehow differently? – Nikolay Melnikov Nov 13 '14 at 08:48
1

Oh ! If you are already using this, than its problem with your server from where you are serving the site. please let me know how are you serving your project. – CrazyGeek Nov 13 '14 at 08:50
1

I just tried now, and despite I have (what seems to be) `html5Mode(true)` - I typed `http://localhost:9000/#/profile`, and the page resolves to `/profile` correctly. Does that mean that `html5` should be enable somehow/somewhere differently, rather than using `$locationProvider`? – Nikolay Melnikov Nov 13 '14 at 08:51
1

yes thats what html5mode do. So i think when you do a reload than its show error "can't GET" am i right? – CrazyGeek Nov 13 '14 at 08:53
Do you know how to change my `Gruntfile.js`, such that it works? I had the contents of my Gruntfile set similar as suggested [here](http://stackoverflow.com/questions/17080494/using-grunt-server-how-can-i-redirect-all-requests-to-root-url), but the problem persists. – Nikolay Melnikov Nov 13 '14 at 09:20
Yes, that what you need. So you should modify your grunt file as mentioned in your link. – CrazyGeek Nov 13 '14 at 09:27
Running the `npm install --save-dev connect-modrewrite` explicitly - solved the problem for me. Thank you very much! – Nikolay Melnikov Nov 13 '14 at 09:51
yes thats the plugin we need to have while applying modrewrite. – CrazyGeek Nov 13 '14 at 09:56

vukan · Answer 2 · 2016-10-13T14:07:48.747

1

When you have html5Mode enabled, the # character will no longer be used in your urls. The # symbol is useful because it requires no server side configuration. Without #, the url looks much nicer, but it also requires server side rewrites.

for more details about Rewrites to be setup:

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

edited Oct 13 '16 at 14:07

answered Oct 13 '16 at 12:40

vukan

191
4
12

Whilst this may theoretically answer the question, [it would be preferable](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – Bhargav Rao Oct 13 '16 at 12:41

ui-router returns: "Cannot GET /page"

2 Answers2

Linked