Hi @michaeltford, this repository is several years old and I don't actively update it. Angular is rather difficult to get working without using Angular CLI, so the newer examples that I've created use Angular CLI instead of a custom webpack configuration. The majority of the code here was written by other people over the years and it does not represent what I consider to be best practice.

To lazy load the dependencies, you should use a single entry point in the webpack config, and remove the common-dependencies entry. The person who authored the webpack config didn't realize that webpack already prevents duplication of the angular and react libraries when you have a single webpack config.

Thanks @joeldenning for the clarifications.

I started a POC today using https://github.com/react-microfrontends and your documentation for best practices. This seems to be very close to what I need. The thing that I am working through now is how to create a 'single' entry point for all the microservices when I don't have access to the original html page. (Ideally as an es6 module and without injecting scripts).

Here is where webpack entry points are documented - https://webpack.js.org/configuration/entry-context/#entry. The documentation shows examples of an object with multiple entries, but it's also possible to have only one entry in the object, or to not have an object at all (just a single string). In the react microfrontends example, they use a single webpack entry because they use webpack-config-single-spa (included in create-single-spa). See the following reference which shows this:

https://github.com/single-spa/create-single-spa/blob/ced1d82c910b1a58abeff7b2ccbe739ecc13cc42/packages/webpack-config-single-spa/lib/webpack-config-single-spa.js#L26