Angular 404 page on Wordpress subfolder apache

Issue

Consider my main website is an angular application at https://example.com, and I put the content of dist folder in public_html. Also, there is a WordPress website at https://example.com/mag/. I am using a cpanel hosting and I only have access to .htaccess to set the redirections.

I need to redirect all the angular routes except mag/ to index.html. But, when I use a link to go to https://example.com/mag/ from my main angular application, instead of opening the WordPress site it redirects back to the angular application.

My current .htaccess which is still not working:

<IfModule mod_rewrite.c>
    RewriteEngine On

    RewriteCond %{HTTPS} !on
    RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}

    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d [OR]
    RewriteCond %{REQUEST_URI} ^/mag/
    RewriteRule ^ - [L]

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

</IfModule>

Solution

I fixed the problem by adding an exception for /mag like this RewriteCond %{REQUEST_URI} !^/mag/. The whole .htaccess should be like this:

<IfModule mod_rewrite.c>
    RewriteEngine On

    # -- REDIRECTION to https (optional):
    RewriteCond %{HTTPS} !on
    RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}

    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d [OR]
    RewriteCond %{REQUEST_URI} !^/mag/ # -- <== here 
    RewriteRule ^ - [L]

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

</IfModule>

Why does this change solve the problem?

When you try to navigate to https://example.com/mag from the main website, Angular routing somehow cannot find /mag because it is not part of the angular application and it goes to the angular 404 page. So this exception solves the problem just because when the route goes to /mag, it won't be redirected to index.html (Angular).

Answered By - Puria Rad Jahanbani