Description
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-app3- 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