How to run two Angular apps in one window?

Photo by Eric Prouzet on Unsplash

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.

Using @angular/elements library

One of the simpler and honestly recommended and opinionated approach is the using @angular/elements library which is well described in official documentation. In short, the idea is to build an Angular application as WebComponent and use it in this form in the parent’s SPA app.

Create shell SPA

Applications built with @angular/elements should be used in the shell application, which will be the core of our architecture. To understand this idea, it’s best to look at an example placed in Microfrontendly repository.

In the example above, we have two Angular applications: foo-app and bar-app. Both are transformed into WebComponent through @angular/elements and run in a collective shell.

The potential and common issue 📉

If we don’t want to mess with additional ejecting Angular app, we surely will encounter the following issue:

What is actually going on here? 😕

When we launch the first foo-app, everything is fine. However, when we want to initialize a second Angular application in the same window scope, the above error is thrown.

Get Marcin Milewicz’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

The issue is strictly related to window.webpackJsonp which is created when the first application is initialized. When the second application is bootstrapped, the content of window.webpackJsonp is not overridden and new application triggers old code. Consequently, the function customElements.define for foo-bar application is called second time, what’s not correct due to the fact custom elements can be registered in window scope once. As a result, we get the above exception

Failed to execute ‘define’ on ‘CustomElementRegistry’: the name “foo-microapp” has already been used with this registry

Follow me on Twitter if you want to be updated about new great Angular and frontend stuff! 😄

How to solve it and run more than one Angular app in one window? 👌

One way to solve this kind of issue (but not the only one) is to use additional Webpack configuration and specify webpackJsonp scope. To solve the problem, we have to follow these steps:

1. Add additional builder to each Angular app which supports custom Webpack configuration

npm i -D @angular-builders/custom-webpack

2. Change configuration in angular.json

"architect": {
 "build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
   "customWebpackConfig": {
    "path": "./scripts/webpack.config.js"
   },
   "outputPath": "dist/bar-microapp",
.....

3. Add appropriate additional webpack.config.js

const uuidv1 = require('uuidv1');

module.exports = {
 output: {
  jsonpFunction: 'foo-microapp-' + uuidv1()
 }
};

The above configuration ensures the uniqueness of the content landing in the window.webpackJsonp function.

Let’s run the example from Microfrontendly repository and check what is going on now.

Unexpectedly, we observe that window.webpackJsonp object is empty. Why? Let’s think and look carefully at the window object.

Finally, we are able to find appropriate contents for particular Angular apps and everything works properly.

Summary 📗

• 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.

Follow me on Twitter if you want to be updated about new great Angular and frontend stuff! 😄