Integrate an Angular app with routes into a Wordpress template used on multiple posts

We offer a multi-tenant solution on Wordpress where we give each of our partners a sub-url. Each sub-url has access to an Angular app:

example.com/our-first-partner/angular/
example.com/our-second-partner/angular/


Further, the Angular supports routes, so each app instance has its own set of pages:

example.com/our-first-partner/angular/dashboard
example.com/our-first-partner/angular/client/3
example.com/our-first-partner/angular/clients?type=A


Each "partner" angular url (example.com/<partner_slug>/angular) points to a Wordpress page post type. Assume that we have at least 200 "angular" pages, one for each partner.

What I'm trying to accomplish is for both Wordpress and Angular to be able to receive the un-tampered URL and direct to the correct page. For example, let's say I type in my browser:

example.com/our-second-partner/angular/client/3?showDetails=true


On the Wordpress side, I expect a redirect rule to take any URL matching "<partnerSlug>/angular/(.*)" and internally load the page post that has a permalink matching the URL (minus the captured suffix). The "angular" page would use a custom PHP template that would set <base href=""> to its permalink, that is, "<partnerSlug>/angular/".

On the Angular side, I expect the angular app to have access to the full URL as it was entered into the browser. The Angular app would see this URL as a route for /client/3 with queryParams { showDetails: true }. Currently, the Angular app's routing when run standalone from localhost:4200 works perfectly.

The issue I'm running into is that I don't know the best way to redirect a wildcard URL to a specific Wordpress post while preserving the URL. Solutions I've found recommend using .htaccess. When I try it:

.htaccess

RewriteEngine On
RewriteRule (.*/angular/).+$ $1 [R=301,L]


PHP Template assigned to the page in Wordpress

Permalink is <?php echo get_permalink(); ?>
URL being accessed is <?php echo "$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]" ?>


Result when requesting https://example.com/our-second-partner/angular/client/3?showDetails=true

Permalink is https://example.com/our-second-partner/angular/
URL being accessed is https://example.com/our-second-partner/angular/


So, the redirect goes to the correct Wordpress post page, but I lose the Angular routing portion of the URL.

I feel like WP_Rewrite might redirect like the .htaccess rule does and without changing the URL suffix, but I haven't found many examples in the WP documentation on how to properly-use WP Rewrite in this way. Any recommendations?

Continue reading...