How to display single-spa app in the browser without root-app

[ethan-gerardot]

Question

How can I serve my single-spa angular app and display it in the browser without going through the root app?

If I run the single-spa command: ng s --ssl --project my-app --disable-host-check --port 9001 --live-reload false, then it serves the app and says to open https://localhost:9001. But when I open it, it doesn't display the app on the screen. (But it does display if I run the root-app, where it's registered properly according to the spa docs).

So how can I get it to display when I go to https://localhost:9001?

Environment

Libs: Angular 17.3.7, "single-spa": ">=4.0.0", "single-spa-angular": "^9.1.2", "zone.js": "~0.14.3"

[ale-caramia]

It happens because of the custom webpack builder and the singlespa-custom webpack. I don't exactly know what the code that "single spa" custom webpack does, but it's necessary to work with single spa.

As much as I know you can't do that without defining another "project" in your angular.json. You should configure that project like a non-singlespa project, using angular 17 esbuild builder for example.

Then, in your package.json you can write a serve script for both of them, specifing the appropriate --project flag.

If someone else knows a better way to do this I'd like to know!

[ethan-gerardot]

I'm not sure I follow you exactly, but I did get a sort of answer on ChatGPT. If you add this to the end of main.single-spa.ts, it works (unless you run into this zone.js problem with Angular 17):

// For standalone mode
// @ts-ignore
if (!window['singleSpaNavigate']) {
  platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));
}

[ale-caramia]

That's awesome! I was suggesting that solution, but yours is much better.