htaccess for Angular app in a subfolder

Question

I have an Angular 6 app living in a subfolder on a D8 installation. I have no issues navigating to the app and the angular routing doing it's thing as I navigate the app. My issues is I get a Drupal 404 if I try to hit the sub routes directly in the address bar.

What do I need to add to my htaccess that will let Drupal ignore the folder and the angular routing still work?

Drupal: localhost:8888

Angular: localhost:8888/my-app

Things I've tried:

Adding: RewriteCond %{REQUEST_URI} !^/my-app/.*$ <- I get Not Found

Changed DirectoryIndex index.php index.html index.htm to DirectoryIndex index.php

Adding the following to httpd.conf:

<Location "/my-app">
 FallbackResource /my-app/index.html
</Location>
<Directory /my-app>
 FallbackResource disabled
</Directory>

Answer 1

You need to add the following rewrite in your Drupal .htaccess

RewriteCond %{REQUEST_URI} !/APP-FOLDER-NAME/.*

Then in the root of the angular application folder you need the following in your .htaccess

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]

RewriteRule ^(.*) /APP-FOLDER-NAME/index.html [NC,L]