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

问题描述

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

解决方法

要使用 customElement 构建用于生产的 Angular 项目，并在量角器中使用 boostraping 组件测试相同的模块，请在模块 bootstrap 中进行以下调整。

@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);
        }
    }
}