How to route in angular 4

Question

I have an angular 4 project and when I run it from localhost:4200/route-a, it works fine and when I refresh the browser, all works well as expected. However, when I

Answer 1

It is not an Angular issue. It is a problem with your apache settings. When you are using HTML5 mode(pretty url) in Angular, you will have to config your Apache to send all request where the resource doesn't exist on the server to the index.html file.

This can be done with the following .htaccess configuration:

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

The reason is that when you try to access /route-a, the apache server will be default try to find the directory route-a and the index.html file within. But because you do not have that directory, will apache return a 404 error.

But by telling apache, that on any request where the location or file do not exist. To send send your Angular html file indsted, will the Angular router take it from there.