使用量角器测试 Angular Web 组件（自定义元素）

Question

当我们在 index.html 中使用 angular 自定义元素标签并使用量角器运行我们的 e2e 测试时，它会导致超时，因为在页面中找不到 angular，因为对于 Angular Web 组件，只有 entryComponents 并且没有引导组件。因为构建用于部署为自定义元素的 Angular 应用程序不需要引导组件。

Answer 1

要使用 customElement 构建我们的 angular 项目以进行生产，并在量角器中测试相同的模块并使用 boostraping 组件，模块引导程序中的以下调整将起作用。

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        HttpClientModule
    ],
    providers: [],
    entryComponents: [AppComponent]
})
export class AppModule {
    constructor(private injector: Injector) {}

    ngDoBootstrap(appRef: ApplicationRef): void {
        if (environment.production) {
            const aboutSystemCustomElement = createCustomElement(AppComponent, { injector: this.injector });
            customElements.define('custom-app-component', AppComponent);
        } else {
            appRef.bootstrap(AppComponent);
        }
    }
}