@angular/elements host application bootstrap twice after element inclusion

[billyjov]

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I built one simple web component using @angular/elements and the new application builder. Then import the web component inside another angular app.

As soon as i call the script inside my component, the component is rendered twice. This make my main.js appear twice in the DOM as script tag. My web components does not appear on the page.

Is there anything i'm missing here? A better result could be archieve using old webpack based builder.

The minimal setup for reproduction can be found here https://github.com/billyjov/angular-elements-demo

For simplicity i just build one app and copy the output into the assets folder of another app.

Minimal Reproduction

1- Create a simple Angular CLI monorepo using the latest version of Angular CLI ng new my-workspace --no-create-application
2- Add two apps to the monorepo, one main and the other that will be use as web component

cd my-workspace
ng generate application my-app

3- Turn one app into web components using @angular/elements

e.g Adjust the main.ts of one app (bootstrap process)

import { createCustomElement } from '@angular/elements';
import { createApplication } from '@angular/platform-browser';

import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

(async () => {
  const appRef = await createApplication(appConfig);
  const appComponent = createCustomElement(AppComponent, {
    injector: appRef.injector,
  });

  customElements.define('awesome-elements-1', appComponent);
})();

4- Build the app and include the output main.js into the second app for consumption.

5- Check the behavior in the Browser.

Or just pull following minimal reproduction of the in following repository

https://github.com/billyjov/angular-elements-demo

Exception or Error

NG0912: Component ID generation collision detected. Components '_AppComponent' and '_AppComponent' with selector 'app-root' generated the same component ID. To fix this, you can change the selector of one of those components or add an extra host attribute to force a different ID. Find more at https://angular.dev/errors/NG0912


I also tried to use differents selectors and add extra `host` to make a differences between components without success.

Your Environment

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 19.1.4
Node: 22.0.0
Package Manager: npm 10.9.2
OS: win32 x64

Angular: 19.1.3
... animations, common, compiler, compiler-cli, core, elements
... forms, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1901.4
@angular-devkit/build-angular   19.1.4
@angular-devkit/core            19.1.4
@angular-devkit/schematics      19.1.4
@angular/cli                    19.1.4
@schematics/angular             19.1.4
rxjs                            7.8.1
typescript                      5.7.3
zone.js                         0.15.0

Anything else relevant?

Browser Chrome & Firefox was used

[alan-agius4]

The component is not displaying because the web component script is not being copied: src/assets/js/elements-1/main.js. See https://github.com/billyjov/angular-elements-demo/blob/97cb49b5e450b8a0c23723773fc63e5e0bf8355a/angular.json#L28-L33

[billyjov]

Hi @alan-agius4. I did it manually/using a simple cp command (See: https://github.com/billyjov/angular-elements-demo/blob/97cb49b5e450b8a0c23723773fc63e5e0bf8355a/package.json#L11). And calling http://localhost:4200/assets/js/elements-1/main.js after serving the main-app display the file content correctly

Edit

what i'm missing in the config. The file content is not the expected.

[billyjov]

Thanks for the fix @alan-agius4 🎉