angular - 使用 Angular 自定义 Web 组件会引发错误 : The selector "app-root" did not match any elements

Question

我有一个带有延迟加载模块和路由的普通 Angular 10 应用程序。但是，我有一个特殊的要求需要满足。
在大多数页面上，我想通过嵌入 <app-root> 来初始化带有路由等的完整应用程序。 index.html 中的元素——即 AppComponent .另一方面，在某些页面上，不应该初始化完整的应用程序，而应该只初始化一个特定的 <header-search>我使用 @angular/elements 注册的组件(Web 组件)。这也意味着除了 <header-search> 之外，不应发生任何路由，也不应发生任何其他组件。在这种情况下被初始化(如果它没有被 <header-search> 组件本身嵌入)。
旁注只是为了让您了解用例的背景:在我正在构建的项目中，并非所有部分都与 Angular 解耦。一些页面使用 Twig/PHP 在后端呈现。但是我需要在这些页面上也可以使用使用 Angular 构建的标题中的搜索功能。这意味着我不会同时拥有完整的应用程序，只有 HeaderSearchComponent在这种情况下。然而，在其他页面上，完整的应用程序将被初始化，包括 HeaderSearchComponet ，因此不需要使用 Web 组件单独嵌入 - 在这种情况下<app-root>元素就够了。
我的想法在哪里注册 HeaderSearchComponent如<header-search>使用 angular 元素的自定义 Web 组件，例如:

@NgModule({
  imports: [BrowserModule, FormsModule, SharedModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  entryComponents: [HeaderSearchComponent]
})
export class AppModule implements DoBootstrap {
  constructor(injector: Injector) {
    const webComponent = createCustomElement(HeaderSearchComponent, {
      injector
    });
    customElements.define("header-search", webComponent);
  }

  public ngDoBootstrap(): void {}
}

有了它，我应该能够渲染 HeaderSearchComponent使用 <header-search>或使用 <app-root> 的完整应用程序.但是，一旦我只嵌入 <header-search>没有 <app-root>同时可用 Angular 会抛出错误:

Error: The selector "app-root" did not match any elements

您可以在以下最小的 Stackblitz 示例中亲自尝试，无需复杂的应用程序逻辑或路由，只需替换 <app-root></app-root>与 <header-search></header-search>在 index.html文件。
https://stackblitz.com/edit/angular-ivy-a4ulcc?file=src/index.html
如前所述，我需要的是一个工作组件 <header-search>没有 <app-root>元素存在。而且，应该可以有 <app-root>没有 <header-search> 的完整应用程序的元素组件存在。所以它要么是 header-search 要么是 app-root，两者都应该工作。
如何将自定义元素组件(在本例中为 <header-search>)作为入口点，并且仍然可以使用 <app-root> 初始化完整的 Angular 应用程序元素？

Answer 1

Angular Web 组件已经可以使用 Angular 元素了。到目前为止我遇到的问题是我不能只有一个没有 <app-root> 的 Web 组件。同时元素。但是，删除 boostrap应用程序模块的属性，而不是添加

entryComponents: [AppComponent],

将使错误消失。但是，这不会初始化 <app-root>不再，因为我们已将其从 boostrap 中删除部分。现在我们必须有条件地手动引导应用程序:

public ngDoBootstrap(appRef: ApplicationRef): void {
  if (document.querySelector('app-root')) {
    appRef.bootstrap(AppComponent);
  }
}

这会成功的。