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