refreshing the page results in 404 error- Angular 6

Question

I am building an application with the help of Angular6 and facing problems in routing. All the routes are working when I click on a particu

Answer 1

To avoid using hashed routes, you must edit your webserver configuration properly, which is the best solution. You just have to configure it so it fallbacks to index.html, which is Angular's bootstrap. Although there is no universal configuration for this, here are some:

Apache

Add a rewrite rule to .htaccess file

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

Nginx

Use try_files in your location block

try_files $uri $uri/ /index.html;

IIS

Add a rewrite rule to web.config

GitHub Pages

You can't configure it directly, but you can add a 404 page. Copy index.html into 404.html in the same directory or add a symlink: ln -s index.html 404.html.

Firebase hosting

Add a rewrite rule.

"rewrites": [ {
  "source": "**",
  "destination": "/index.html"
} ]

Source: https://angular.io/guide/deployment#server-configuration