Sometimes, to solve a specific case in designing an application using Angular framework, we can choose an architecture that assumes running two or more separate Angular applications in one window scope.

Leaving aside the pros and cons of such a micro-frontends approach, let’s look at how we can prepare our architecture to run multi separate Angular applications within one shell SPA.

TLDR;

• We are able to run multiple Angular applications in one window scope through @angular/elements
• We need to provide unique space for storing webpackJsonp content
• We can ensure a unique name for the webpackJsonp content by providing additional configuration with @angular-builders/custom-webpack
• Practical application and solution for the multiple Angular application running can be found in the Microfrontendly repository.

#angular-elements #webpack #angular #spa