Documentation on how to create web components from existing Angular Components

[andrew-tud]

Hi, All,

I am trying to create a POC for an Angular Shell and MFEs for weeks but could not make Luigi Framework accept Angular Components which were converted as web components. We have an existing Angular project with a lot of components. I tried making a web component in angular using this link as reference: https://blog.kalvad.com/export-your-angular-component-as-a-web-component/ , but unfortunately could not make it to work in Luigi Framework. Is there a documentation or an easy way to convert Angular Components to web components that Luigi can accept? Basically, I need nested Micro Frontends and a Shell built in Angular. The web components should be hosted in a different server with different url domains (CORS policy is allowed) that the Shell will call or "orchestrate".

Thank you.

[hardl]

Hi,
luigi offers two ways for integration of web component based micro frontends. The preferred way is that your web component is served as a single esm javascript file that exports the web component class as default. With such a setup, you just have to configure the viewUrl and set webcomponent: true at the node in luigi config.
I'm not sure if this is somehow possible with angular elements, at least I could not find out how a while back.
Therefore for angular elements, as well as other frameworks with limited controll over the output format, you should use the second way, which is what we call "self registration".
If you create a redistributable angular elements web component by following one of the tutorials out there, you usually have something like this in your app.module.ts:

export class AppModule {
  constructor(private injector : Injector){}
  ngDoBootstrap(){
      const el = createCustomElement(MyWebComponent, {injector : this.injector});
      customElements.define('my-web-component',el);
  }
}

Obviously it is not ideal that the micro frontend itself defines the tag name because of potential conflicts and the tag name is also totally irrelevant for a luigi micro frontend. But even that would already work, if you configure it like

...
{
    label: 'My MFE',
    viewUrl: 'path/to/mymfe.js',
    webcomponent: {
        selfRegistered: true,
        tagName: 'my-web-component'
    }
...

Better solution:
Instead of define your custom element directly in the custom elements registry, use a luigi function that is added to the window object

export class AppModule {
  constructor(private injector : Injector){}
  ngDoBootstrap(){
      const el = createCustomElement(MyWebComponent, {injector : this.injector});
      // customElements.define('my-web-component',el);
      window.luigi._registerWebcomponent(document.currentScript.getAttribute('src'), el);
  }
}

With that, luigi takes care of the tag name and you can remove it from the config:

...
{
    label: 'My MFE',
    viewUrl: 'path/to/mymfe.js',
    webcomponent: {
        selfRegistered: true
    }
...

Also make sure the url where your web component is hosted is matched by the validwebcomponenturls config.