Redirect loop in Angular application hosted in a subdirectory

Issue

I'm trying to configure an Angular application to be served from a subdirectory of an existing website. The website is hosted at https://localhost/abc, while the Angular application is hosted at http://localhost:4200, by ng serve.

I want the Angular application to be accessed from https://localhost/abc/new, so I've configured the web server to proxy the requests to /abc/new to the Angular application. When I try to access the Angular application, I can see the page, but parts of it don't work because it is loading the resources from the root of the site, instead of /abc/new.

I've configured the base element to <base href="/abc/new/">, but that didn't seem to do anything. I then set the baseHref option on angular.json to "/abc/new/", but when I do that I get a redirect loop when accessing the site. The https://localhost/abc/new URL returns a redirect to /abc/new.

If I try to access the Angular application directly, at http://localhost:4200/abc/new, it works correctly.

What am I missing?

Solution

The problem was that my reverse proxy was sending the requests to http://localhost:4200/, but the Angular application expected them to be to http://localhost:4200/abc/new/. Changing the reverse proxy rule to include that path solved it.

Answered By - Antoine Aubry