Search code examples
angularcross-domaindynamic-loadingmicro-frontendangular-lazyloading

Angular cross-domain dynamic component loader

I am investigating Micro-Frontend possibilities with Angular. I am looking into the feasibility of having independently the different parts of the UI served by their own HTTP server process but composed dynamically on the main UI; which is merely a UI template with placeholders to be replaced by these dynamically loaded Micro-Frontends.

Currently we are using iframes for this and it works great apart from the extra resources required on the client browser and of course the not so dynamic and limited approach.

My question is if it is possible to have a component in an Angular App implementing a shared and well-known component interface, be loaded dynamically from another URL; subdomain in our case?

For example, we have the following domains:

  1. domain.com
  2. sub1.domain.com
  3. sub2.domain.com

and we have the following component available from sub1.domain.com:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'sales-frontend',
  templateUrl: './sales-frontend.component.html',
  styleUrls: ['./sales-frontend.component.css']
})

export class SalesFrontEndComponent implements SharedInterface, OnInit {
  constructor() { }

  ngOnInit() {
  }
}

is it possible to load it dynamically on the domain.com [main UI] from the sub1.domain.com?

Same goes for another component such as ProductsFrontEndComponent provided by the sub2.domain.com.

Thank you very much priory!

Solution

  • When it comes to Angular - I've seen this done in a few different ways, each one with it's own different pitfalls and personally I didn't like neither of the options for one reason - they've made development and / or deployment more complicated instead of simplifying it. And for me it defeated the purpose of micro frontends.

    If you have something that's "good enough" personally I would stick to it until Webpack Module Federation gets polished out. In short - module federation allows easy referencing of modules that are not known at the compile time, which should perfectly cover your case.

    Below is a bunch of resources on the topic (including examples, Angular included):