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.
Now Click the Job Side bar menu or any or the side bar element
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.
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