After ng build in Angular 2 Cli application build the refresh shows 404 Error

I have successfully create and run an angualr2-cli application. I also deploy the application on the apache server, For this I am using the help of angular2-cli command ng build

But My application goes down ( 404 Page Not Found Error) while refreshing the child pages.

Please do the following steps you will realize the problem I have mentioned.

1. Click this link to load the web page

2. Now Click the Job Side bar menu or any or the side bar element

3. Then refresh the page

You would able to see my problem. The page gone and show 404 Error. Why it is happen on after deploy into apache server. The refresh is perfectly work on development environment (http://localhost:4200 ) while I'm running the server using ng serve command

I have fixed this issue following this guide. That is nothing wrong in my configuration. The problem is to adding the .httaccess and allow rewrite rule on the server settings.

I summarized the steps what I have done to fix this issue.

1. I have added .httaccess file on the location where the index.html resides.

   <IfModule mod_rewrite.c>
     RewriteEngine On
     RewriteBase /
     RewriteRule ^index\.html$ - [L]
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteRule . /index.html [L]
   </IfModule>
   

2.Then allow the rewite mod on apache server using sudo a2enmod rewrite

3.The restart the apache server service apache2 restart

4.After that open the /etc/apache2/sites-enabled/000-default.conf file and add the following rule on <VirtualHost> tag

<Directory "/var/www/html">
   AllowOverride All
</Directory>

That's it!! Any of the links redirect to my index.html and works. Because All of the routes are route from index.html in angular2 routing