使用自定义 ngDoBootstrap 和 createCustomElement 时，Angular Router 会忽略 URL

Question

当我使用自定义ngDoBootstrap函数而不是默认函数时bootstrap: [AppComponent]，如下所示：

@NgModule({
  imports:      [ BrowserModule, FormsModule, AppRoutingModule ],
  declarations: [ AppComponent, HelloComponent ],
  exports: [ AppComponent ],
  entryComponents: [ AppComponent ],
  // bootstrap: [AppComponent],
})
export class AppModule {
  constructor(private injector: Injector) {
  }

  public ngDoBootstrap(): any {
    const appElement = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('my-app', appElement);
  }
}

然后 应用程序路由被破坏。

它会忽略 URL 中的任何更改，并且仅在我单击 时才起作用 <a [routerLink]='...'>。此外，初始路线 / 未加载。

它一定是由自定义引导机制引起的，因为当我取消注释时bootstrap: [AppComponent]，一切正常。

完整代码可在此处获取：stackblitz 示例（由于 stackblitz 使用的 typescript 版本，需要下载并在本地运行）

如何使路由与自定义应用程序模块引导一起工作？

Answer 1

如果是自定义元素，则必须手动调用 router.initialNavigation：

export class AppModule {
  constructor(private injector: Injector, private router: Router,
    private location: Location) {
    const appElement = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('my-app', appElement);


  public ngDoBootstrap(): void {
    // workaround for bug - initial route not loaded: https://github.com/angular/angular/issues/23740
    this.router.initialNavigation();
  }
}