Angular page not found when it's refreshed

Question

I faced strange issue while deploying the Angular project on my local server. I built the project and copied to the webserver folder which can be accessed using: http://localhost/angular/

base href also set up and app is working fine. When I click the link, it's working, for ex: http://localhost/angular/apartments But if I refresh, it's gone 404 error is showing.

Angular plays with the URL, but when you refresh the page, your server actually thinks you're asking him the apartments page, while in fact you're asking Angular ! Two ways from that : either you declare all your routes to your server, or you use the hash like this (in your RouterModule declaration) : `RouterModule.forRoot(yourRoutes, { useHash: true })` — , Sep 12 '17 at 14:44

score 0 · Answer 1 · edited Sep 12 '17 at 14:47

if your server is apache simply create a file with a name of .htaccess paste this data

 <IfModule mod_rewrite.c>
     Options Indexes FollowSymLinks
     RewriteEngine On
     RewriteBase /myappdirectory/
     RewriteRule ^index\.html$ - [L]
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteRule . /index.html [L]  <--- get the index.html file path starting from public html folder
 </IfModule>

update the last line according to the command

save and then refresh your page. luckily your page works

For IIS server follow this link

http://jasonwatmore.com/post/2017/02/24/angular-2-refresh-without-404-in-node-iis

Angular page not found when it's refreshed

1 Answers1