Incorporate standalone single-spa config

[filoxo]

Description of Proposed Feature

Per discussion on single-spa slack with @yww325, it seems that it'd be relatively easy to incorporate standalone-single-spa-webpack-plugin to enable standalone mode for Angular applications, like other create-single-spa generated applications have. I'm copying the conversation here (with my own formatting added) for posterity and reference:

ok, I figured it out, need to pnpm install two packages

"standalone-single-spa-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "3.2.0"

(can't use latest version due to a tag async issue) then use a default main.ts like below and include it in tsConfig and set as the main entry point of angular build.

platformBrowserDynamic().bootstrapModule(AppModule)
 // Generated by Angular CLI
 // eslint-disable-next-line no-console
 .catch((err) => console.error(err));

Anyway, I forked it into https://github.com/yww325/play now I can access https://localhost:4202/play ideally, there is a separated options and build configuration using main.ts for standalone purpose.

Community contribution for this is needed

I'm opening this issue knowing that I don't know Angular/angular-cli internals. This seems like a good feature to add but we need community help to implement and test.

In what way would you use it?

Projects generated with create-single-spa should have this feature incorporated. Projects that trigger this plugin (eg. ng add single-spa) could either have it automatically generated or should prompt to add.

Initial requirements

1. Relevant packages should be installed using Angular schematic
2. Relevant scripts should be added to package.json
3. Standalone configuration should be separate or conditional based on a flag

Remaining questions

1. Should this be optional? If so the schematic would need to handle prompting user.
2. Should this be handled in create-single-spa instead? I'd think not but Angular is unfamiliar territory.
3. How to validate angular-cli underlying library compatibility? In other words, how can we be sure that the version(s) of webpack used by angular-cli is compatible with this plugin and configuration? If not how to handle gracefully?
4. How to test/validate across all versions of angular-cli?

[joeldenning]

Should this be optional? If so the schematic would need to handle prompting user.

I think that standalone mode should just be another script in the package.json, similar to what we've done with other projects. npm run serve starts integrated mode, npm run serve:standalone starts standalone mode.

Should this be handled in create-single-spa instead? I'd think not but Angular is unfamiliar territory.

This should be done in single-spa-angular, not create-single-spa. All that create-single-spa does is defer to Angular CLI and single-spa-angular. The single-spa-angular project controls the webpack configuration (including adding plugins like the standalone plugin) and also has the ability to modify the package.json to add new scripts.

How to validate angular-cli underlying library compatibility? In other words, how can we be sure that the version(s) of webpack used by angular-cli is compatible with this plugin and configuration? If not how to handle gracefully?

You can detect which version of angular is installed via something similar to import { version } from '@angular/core'. However, the single-spa-angular project maintains different major versions for different versions of Angular, so we might need to do that since the latest version of single-spa-angular only works with the latest versions of Angular.

How to test/validate across all versions of angular-cli?

I don't think we'd need to support all versions of angular cli