Deploying prod build to Apache 2

So you would like to deploy your production build to an Apache2 server? You will notice then that

• reloading pages, besides root, and
• deep linking

will cause 404 errors (unless you are using the HashLocation strategy). The reason is that all Angular2 routes should be served via the index.html file.

This can be achieved by adding a .htaccess file (in the same directory where the index.html resides) with the following contents.

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

This piece of code makes use of the mod_rewrite module from Apache, so make sure you have this enabled. In linux this can be done as following (probably all commands have to be run as sudo):

a2enmod rewrite

Restart the apache2 service after that

service apache2 restart

Also for the rewrite module to work, the apache configuration should have AllowOverride all enabled for the directory where the Angular2 app is served. In the default case this can be done as follows:

Open the file /etc/apache2/sites-enabled/000-default.conf Then add the following piece of code inside the VirtualHost block (assuming the Angular2 app is served from /var/www/html)

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