Angular 18+ Elements bundled as Web components

Question

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'm zero percents familiar with Angular Elements, but maybe this will help you - buddy.works/tutorials/building-web-components-with-angular — lucifer63
– lucifer63, Commented Sep 25, 2024 at 8:49
Eventually, I read it. :) I have this working in Angular version 16.x I removed the zone JS from the compilation. My working example uses NgModules to organize the app components. The thing is that the latest version docs in the section for the Elements, they describe it in a so elegant way, but I can't figure out how this should be bundled and work outside angular app. — Vladyn
– Vladyn, Commented Sep 25, 2024 at 10:11

Ashraf · Accepted Answer · 2024-12-27 07:45:02Z

2

+50

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!

answered Dec 27, 2024 at 7:45

Ashraf

1113 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rens Jaspers Dec 29, 2024 at 7:13

For me, this only works if you use [type=module] in your script tag (<script src="main.js" type="module"></script>) and also include polyfills.js before it: <script src="polyfills.js" type="module"></script>.

Rens Jaspers Dec 29, 2024 at 7:18

I’m looking for a reliable way to bundle everything into a single file using an existing, standard method. I’d prefer not to create a custom script to concatenate everything manually. Given that a primary use case for Angular Elements is embedding components into other websites, I’m surprised there’s no official documentation on bundling for simple inclusion in a site.

Collectives™ on Stack Overflow

Angular 18+ Elements bundled as Web components

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related