Angular 路由器在使用自定义 ngDoBootstrap 和 createCustomElement 时忽略 URL

Question

WHEN 我使用自定义 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 机制引起的，因为当我取消注释 bootstrap: [AppComponent] 时，一切正常。

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

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

Answer 1

我通过关注 this tutorial 设法使它工作。

据我了解，angular 元素并不真正支持内部应用程序路由（请参阅此 SO post) and this open github issue。

解决方法是手动指示路由器在位置变化时导航到内部路由

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

    /**Add the lines below to your code**/
   //init router with starting path
    this.router.navigateByUrl(this.location.path(true));

    //on every route change tell router to navigate to defined route
    this.location.subscribe(data => {
      this.router.navigateByUrl(data.url);
    });

}

这是工作stackblitz example

Answer 2

如果是自定义元素，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();
  }
}

Angular 路由器在使用自定义 ngDoBootstrap 和 createCustomElement 时忽略 URL

Angular Router ignores URL, when using custom ngDoBootstrap and createCustomElement

typescript

custom-element

angular

angular-router

angular8