How to control baseHref when serving up single-spa-angular app

[ethan-gerardot]

Question

Whenever I run npm run serve:single-spa:my-app (which is configured to run this command: ng s --ssl --project my-app --disable-host-check --port 9002 --live-reload false), then I get the following output:

** Angular Live Development Server is listening on localhost:9002, open your browser on https://localhost:9002/ **

I understand why it's serving on port 9002 (it's in the configured command), but I can't figure out how to control the base href so that the link is https://localhost:9002/my-app instead of just https://localhost:9002/

I've tried setting it in angular.json ("baseHref": "/my-app") like you would in a normal angular app, and I've tried setting it in app-routing.module.ts ( providers: [{ provide: APP_BASE_HREF, useValue: '/my-app' }],), but nothing seems to change it.

Environment

Libs: "@angular/core": "^14.2.0", "single-spa": ">=4.0.0", "single-spa-angular": "^7.1.0",

[Arjun99]

Do you need the root-config application to be server on localhost:9002/my-app instead of localhost:9002? Is this the question?

[bh3605]

I'm passing my MFEs base href from the root into each one's custom config. However, when I play around with single spa remotes this usually does the trick.

{ provide: APP_BASE_HREF, useFactory: () => window.location.pathname }