After starting a blog series about Module Federation, I’ve got a lot of positive response. This emphasizes that loading separately compiled and deployed code is really needed in some scenarios. As bundlers like webpack, and hence the Angular CLI, did not allow for this so far, Module Federation is a big game changer.

However, Module Federation depends upon webpack 5 which is currently in beta and will not be used by the Angular CLI before this fall. Although time solves this issue for us automatically, some people are wondering how to accomplish what Module Federation is doing already today.

Interestingly, there are several approaches and here I present one of them: Loading separately compiled UMD bundles. The source code can be found here.

Credits: The approach presented here has been inspired by the work of Victor Savkin who uses a similar approach to load separately compiled libraries with the Angular router here and a great conversation I had with Rob Wormald about webpack externals several months ago. Also,this example inspired me to find an unobstrusive way for sharing externals without tweeking the Angular CLI.

The Case Study

Even though everything I’m showing here works directly with Angular and the Angular CLI, I’m using an Nx workspace because it provides lots of nice features for big systems subdivided into tiny parts. For instance, it allows visualizing them:

The shell app in our example is capable of loading separately compiled and deployed libraries like the flight-lib:

If we wanted to start the flight-lib in standalone mode, you would use the flight-app which directly references it.

#unkategorisiert #angular #module federation light #angular cli