Angular Маршрутизатор игнорирует URL при использовании пользовательских ngDo Bootstrap и createCustomElement

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, потому что когда я раскомментирую bootstrap: [AppComponent], все работает нормально.

Полный код доступен здесь: образец stackblitz (должен быть загружен и запущен локально из-за версии машинописи, используемой stackblitz)

Как заставить маршрутизацию работать с самозагрузкой пользовательского модуля приложения?

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

Answer 2

Мне удалось заставить его работать, следуя этому руководству .

Насколько я понимаю, элементы angular на самом деле не поддерживают внутреннюю маршрутизацию приложений (см. Эту статью SO ) и эту открытую проблему github .

Решение состоит в том, чтобы вручную указать маршрутизатору переходить на внутренние маршруты при изменении местоположения

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