Local development of single single-spa child app

Question

I managed to create a working single-spa application (with navbar and 3 other apps), copied and modified from https://github.com/joeldenning/coexisting-angular-microfrontends.

Now, I understand that the final output of a single SPA app instance has to be in a format that single-spa accepts. But, I wonder if and how to get a single microfrontend locally running for development purposes.

Say I want to develop the navbar micro ui standalone, with just the navbar in the browser.

When I start npm run start (which runs ng start), I only get the main.js served. And Angular doesn't bootstrap.

What do I need to change?

Regards

Answer 1

From the Local Development section of the Recommended Setup docs:

In contrast to monolithic frontend applications, local development with single-spa encourages only running the one microfrontend you're working on, while using deployed versions of all other microfrontends.

There are potential pitfalls when creating an isolated environment to run an individual microfrontend, such as differences between production and local environments (eg. versions in import maps, globals, fonts, css, etc).

That said, the demand for a standalone environment is there so standalone-single-spa-webpack-plugin was created to cater to this use. This setup attempts to stay as close to the production environment by using import maps as well but may suffer from the same issues.