Angular 2 routing issue - 404 error on update or reload
I am facing an issue related to angular routing. All pages are working fine, but if the page is reloaded or refreshed it gives a 404 error. I am using a location strategy. I searched a lot but found a thing other than hash placement strategy. I tried the Hash placement strategy but adds # to the url (e.g. webiste.com/home#contact) but I want the url without the #.
I need some expert advice as I am stuck after searching 3 4 days
Thank you in advance
source to share
Depending on which server you are using, you need to set up your routing to always point to index.html.
Of course, you need to install <base href="/">
in <head>
yourindex.html
If you update the url site.com/myPage
, the server will try to get a resource named myPage, in your case it will return 404.
WAMP settings
Options -Indexes
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) index.html [NC,L]
IIS settings
<system.webServer>
<rewrite>
<rules>
<rule name="AngularJS Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
source to share