Angular 2 apache .htaccess file 404 on subpages

Question

I have successfully installed and ran Angular 2 app on my apache server, I am able to navigate through the pages via [routerLink]="['/register']"

However when I refresh the page I get a 404 error on the register page. Is there something wrong with my rewrite rules:

Options +FollowSymLinks
<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteRule (.*) index.html [L]
</ifModule>

Also here is my apache VirtualHost

<VirtualHost *:80>
    ServerName example.com
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html/front/dist/browser
    <Directory /var/www/html/front>
        AllowOverride All
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Answer 1

you can solve it by redirecting 404 Error to your index.html

– In Apache Server hosting, edit Apache configuration:

sudo nano /etc/apache2/sites-enabled/000-default.conf

– Add ErrorDocument 404 like this: my index.html is found in /var/www/html/vas/index.html

– Full file:

<VirtualHost *:80>
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html

# redirect 404 to index page
ErrorDocument 404 /vas/index.html

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

– Restart Apache server by cmd sudo service apache2 restart