Skip to content Skip to sidebar Skip to footer

Angular-ui-router With Html5mode Refresh Page Issue

I have an app that uses angular-ui-router with html5mode(true). Everything seems to work fine when running and routing to other states. My default state is app/calendar which is se

Solution 1:

I'm not sure if this is going to solve your problem, but I had a very similar problem. First thing I had to do to use html5mode was to use a rewrite property so the app would reload from the index file when i refresh the page, no matter what $state I'm. This is the code I´m using, but it may be different, depending on the serverside you are using.

<IfModule mod_rewrite.c>
    RewriteEngine On
    #RewriteBase /relative/web/path/

    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^(.+) - [PT,L]

    RewriteCond %{REQUEST_URI} !=/favicon.ico
    RewriteRule ^(.*) index.html

    RewriteCond %{HTTP:Authorization}  !^$
    RewriteRule .* - [E=REMOTE_USER:%{HTTP:Authorization}]
</IfModule>

You can read more here, in the docs from ui-router

Also, you'd better set a base or not use a base for your app.

You either insert <base href="/" >inside your head tag (or other base folder, depending on your structure).

Or you can use:

$locationProvider.html5Mode({enabled:true,requireBase:false});

So you don't have to use a base.

Also, you don't need a .run to define a default state, ui-router can do it with $urlRouterProvider.when or $urlRouterProvider.otherwise You can read more in the docs

Since I'm new user to Angular, this is just what i did to solve my problem, which was very similar to yours. Hope it can help you.

Solution 2:

I had the same issue, and I fixed it by adding this:

app.config(..., $urlMatcherFactoryProvider) {
    $urlMatcherFactoryProvider.strictMode(false);
});

This is because my route was adding a trailing slash / at the end of the paths and $stateProvider was not recognizing the URL, thus taking me back to the home state.

Post a Comment for "Angular-ui-router With Html5mode Refresh Page Issue"