Deploy Angular 2 to Apache Server

Question

I want to deploy an Angular 2 application on an Apache server. I've read various guides like this and this but none of them is working. I have npm and ng installed on the server.

In a nutshell, here's what I did:

1. Cloned complete project repository on my server.
2. Installed dependencies using npm install.
3. Used ng build --prod command and it created a dist directory.
4. Changed apache root to /var/www/html/dist directory.
5. Enabled mod_rewrite, restarted apache and added this .htaccess in my dist directory.

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

But only my home page domain.com works, other pages like domain.com/login, domain.com/register etc. throw 404 error. Even domain.com/index.html/login doesn't work.

The application works fine on my local system where I'm developing it using ng serve. What am i missing?

Answer 1

Create .htaccess file in the root folder and paste this in .htaccess

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