SystemJS -> ESM migration

[internettrans]

Description of Proposed Feature

As of create-single-spa@5, root configs expect all microfrontends to output to ESM, by default. I don't know how the single-spa-angular build works anymore - in the react ecosystem we have shared webpack configs and what I remember is that single-spa-angular had a shared webpack config, too. The outputSystemJS option might be a good naming convention for a configuration option within single-spa-angular for those who wish to continue using the latest versions of single-spa-angular without upgrading everything to esm first.

In what way would you use it?

The single-spa issue queues are people asking how to migrate Angular apps.

[manbearwiz]

I'm willing to help out here anyway I can. I have a production single-spa app with multiple angular front ends, currently using webpack umd bundles, that I would like the transition to ESM.

The current shared webpack config fn already reads a config option, libraryTarget from the angular.json file so I'm not sure a new option is needed. We just need a couple small tweaks to the webpack config. I have gotten a prototype working by making the following config changes in each app.

angular.json

"customWebpackConfig": {
- "libraryName": "unauthorized",
- "libraryTarget": "umd"
+ "libraryTarget": "module"
},

extra-webpack.config.js

+ singleSpaWebpackConfig.experiments.outputModule = true;
+ delete singleSpaWebpackConfig.output.library;

I created this PR as a simple first step toward this end.

[CaptainGlac1er]

We are using

angular.json

"customWebpackConfig": {
    "path": "extra-webpack.config.ts",
    "libraryName": "<project name>",
    "libraryTarget": "umd"
}

extra-webpack.config.ts

import singleSpaAngularWebpack from 'single-spa-angular/lib/webpack';

export default (
  config: Parameters<typeof singleSpaAngularWebpack>[0],
  options: Parameters<typeof singleSpaAngularWebpack>[1],
) => {
  const singleSpaWebpackConfig = singleSpaAngularWebpack(config, options);

  // Feel free to modify this webpack config however you'd like to
  return singleSpaWebpackConfig;
};