javascriptangularweb-componentangular-elements

Angular 18+ Elements bundled as Web components


I have the following question about taking direction to build a web application separated into a micro-front-end app. For this purpose, I'm using Angular Elements. I'm reading the official documentation at https://angular.dev/guide/elements, and my question is: How can I bundle (run) ng build and embed a script in my page that automatically bootstraps the app when the custom element is added to the DOM? <popup-element message="alabala"></popup-element> - when I have this on my page, I want my micro app to start.

Note: I'm using the latest release, 18.2.x, and the experimental zone-less feature. The Zone.js is messing my router in the outer app, which is Aurelia :)

By running the example from the angular docs, I can not see it as a stand-alone working web component.


Solution

  • I think, To achieve this,

    you’ll need to bundle your Angular application as a custom element and ensure it self-bootstraps when added to the DOM. Here’s a high-level approach:

    1.  Bundle the App: Use ng build with Angular CLI and specify configurations to generate a single JavaScript file. Ensure the output is optimized for custom elements:
    
    ng build --output-hashing=none
    
    
    2.  Modify the Entry Point: In your main.ts, bootstrap the app as a custom element:
    
    import { createCustomElement } from '@angular/elements';
    import { PopupComponent } from './app/popup/popup.component';
    import { Injector } from '@angular/core';
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    import { AppModule } from './app/app.module';
    
    platformBrowserDynamic().bootstrapModule(AppModule).then((module) => {
      const injector = module.injector;
      const popupElement = createCustomElement(PopupComponent, { injector });
      customElements.define('popup-element', popupElement);
    });
    
    3.  Embed in Your Page: Include the generated JavaScript file in your HTML, and your custom element will bootstrap automatically when added to the DOM:
    
    <script src="path-to-your-bundle/main.js"></script>
    <popup-element message="alabala"></popup-element>
    

    I think this setup ensures your micro-frontend behaves as expected when dynamically inserted into the page. Make sure to test shared dependencies.

    Hopefully that helps!