1

I had made a SPA in angularjs, when I run it on browser it showed me '#' in the address bar. So I enabled html5Mode. This successfully removed '#' from the url but when I try to reload the page, it gives 404: page not found error. I tried writing in .htaccess from this url: htaccess redirect for Angular routes

Nothing change. I also followed grunt answers but that was also not helpful.

Community
  • 1
  • 1
Arushi Jain
  • 423
  • 4
  • 14

2 Answers2

0

Did you correctly enable html5 mode?

Take a look at the answer to a question regarding html5 mode/hashbang mode.

Did you add <base href="/"> to the head of your html?

Community
  • 1
  • 1
pgrodrigues
  • 2,083
  • 1
  • 24
  • 28
  • yes @user3632710 I have correctly enable html5 mode as described in your link but the problem of reloading still persist – Arushi Jain Dec 17 '15 at 13:21
0

You need to setup your server routes to return index file for all angular urls.

Usually you register your api at some special endpoint (as mysite.com/api/v1) and if url is not matching this pattern return index.html file with angular bootstrap logic.

This happens because without html5 mode all requests are sent to root server url (mysite.com/ even if link is mysite.com/#!/profile) but when you enable html5 mode, requests are sent as declared in angular so if you have '/' route with href to profile (/profile) and reload page from there (mysite.com/profile), request will be sent to mysite.com/profile and it will respond with 404 as it is setuped to return index file only for '/' url

Ihar Krasnik
  • 2,499
  • 2
  • 13
  • 17
  • thank you @Ihar you explained me very clearly. The issue still exist. I have now redirected the routes to index.html using following LOC $routeProvider.when('/', { templateUrl: 'webapp/index.html' }); I still get 404. – Arushi Jain Dec 17 '15 at 14:13