javascript - Page reload fails when using Angular Ui Router with Html5 mode enabled -


i using angular ui router in angular app , have enabled html5 mode remove # form url using $locationprovider in config.

var app = angular.module('openidc', ['ui.router']); app.config(function($urlrouterprovider, $stateprovider, $locationprovider) {      $locationprovider.html5mode(true);      $urlrouterprovider.otherwise('/');      $stateprovider     .state('home', {         url: '/',         templateurl: 'views/home.html',         controller: 'homecontroller'     })     .state('login', {         url: '/login',          templateurl: 'views/login.html',         controller: 'logincontroller'     }) }); 

i have set <base href="/" /> tag in index.html file well. routing works fine , can navigate pages , # removed when refresh page using reload button on browser there 404 error response.

enter image description here

why happening , how can fix , have html5 mode enabled have proper urls

kasun, reason occurring because trying refresh page 1 of sub routes (has nothing ui-router).

basically if request www.yourdomain.com/ have server setup return index.html bootstraps angular app. once app has loaded, further url changes take html5mode consideration , update page via ui-router.

when reload page angular app no longer valid has not loaded yet, if trying load sub route (for example: www.yourdomain.com/someotherpage), server not know how deal /someotherpage , returns 404 or other error.

what need configure server return angular app all routes. use node/express, like:

app.get('*', function(req, res, next) {     // call routes , return index.html file here } 

note: use final catch all, include other routes above things requesting static files, web crawlers, , other specific routes need handled.


Comments

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

java - How to filter a backspace keyboard input -

java - Show Soft Keyboard when EditText Appears -