angular 4 deployment package refreshing error server in apache server

Question

Currently, my angular app run apache server in \'http://localhost\' root or index page, but when refreshing the inner page \'http://localhost/dms-data/summ

Answer 1

This is because you are using HTML pushState as location strategy due to which when you refresh from browser, the browser sends request of your routed page to apache server. As apache server is unaware of this internal routing by angular due to it shows 404 error.

There are two possible solutions for this:

1. Define fallback page as index.html: You need to configure this in server due to which any unknown page request (which is your routed request) send to your server will be redirected to your main html viz. index.html (See this link for configuring your server)

2. Use Hash based location strategy: Using this you won't need any server configuration.Moreover your routed page URL would be like localhost/#/route1. If you're building a website then it may also hamper SEO. (See this link for more info)

Answer 2

you can create .htaccess file in your project directory and put this code into your .htaccess file

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

You can check all step to deploy angular build on apache server Deploy step