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.
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
Post a Comment