Question posted in
Some documentation to get you started can be found here.

Angular 2 apache .htaccess file 404 on subpages

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>
Tags:

4

Answers


  1. 0

    Yes, As per I understand, your rewrite rules don’t seem correct to me..

    You are saying if the requested document is not a file AND not a Directory AND I guess not the index page then redirect to index.html and what if they are?? And why don’t you want to go to the index page? I believe RewriteCond %{REQUEST_URI} !index means you don’t want to go to index.

    I don’t know what is your requirement but for a simplistic reqirement I use:

        RewriteCond %{REQUEST_FILENAME} -s [OR]   # don't redirect for files which phycically exit
    RewriteCond %{REQUEST_FILENAME} -d  # don't redirect for directories
    RewriteRule ^.*$ - [NC,L]  # if the above condition(s) satisfy then do nothing
    RewriteRule ^.*$ index.html [NC,L] # for everything else, redirect to index.html
    Login or Signup to reply.
  2. 0

    Try This

    RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

    Check this:https://github.com/angular/angular-cli/issues/1630

    Ref:https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/

    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
  4. 0

    Try creating a .htaccess file on the root of your application with the below rules,

    RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.html [L]
RewriteRule ^ /index.html
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search