Angular Module Federation отбрасывает оболочку приложения при обновлении страницы

Оболочка приложения может загружать пульт дистанционного управления при активации маршрута /путешествия. Сначала все в порядке, но когда я обновляю страницу, оболочка приложения выбрасывается, а корневой компонент оболочки больше не является частью DOM. Вместо этого корневой компонент пульта дистанционного управления помещается в DOM, хотя я ссылаюсь на функциональный модуль пульта дистанционного управления Travel, а не непосредственно на его модуль приложения.

Также, когда я захожу на localhost:4200/travel/contracts напрямую, происходит то же самое.

DOM после обновления:

Маршрут в оболочке приложения:

      const routes: Routes = [
  {
    path: 'travel',
    loadChildren: () => loadRemoteModule({
      remoteEntry: 'http://localhost:4201/remoteEntry.js',
      type: 'module',
      exposedModule: './Module'
    })
    .then(m => m.RootModule)
  }
]

RootModule(микрофронтенд):

      export const scope = function(http: HttpClient) {
  const loader =  ['en', 'de'].reduce((acc: any, lang: string) => {
    acc[lang] = () => firstValueFrom(http.get(`${RootModule.url}/travel/assets/i18n/fields/${lang}.json`));
    return acc;
  }, {});
  return {scope: 'fields', loader: loader}
};

@NgModule({
  declarations: [RootComponent],
  imports: [
    CommonModule,
    RootRoutingModule,
    FormsModule,
    SharedModule.forRemote(environment),
    TranslocoModule
  ],
  providers: [
    {
      provide: TRANSLOCO_SCOPE,
      deps: [HttpClient],
      useFactory: scope
    }
  ]
})
export class RootModule {
  public static url = environment.shellUrl;

  public static forRoot(): ModuleWithProviders<RootModule> {
    this.url = environment.frontendUrl;
    return {
      ngModule: SharedModule,
    };
  }
 }

Это ошибка, которую я получаю:

ОШИБКА Ошибка: селектор «luis-shell-root» не соответствует ни одному элементу в DefaultDomRenderer2.selectRootElement (platform-browser.mjs:574:19) в BaseAnimationRenderer.selectRootElement (animations.mjs:261:30) в locateHostElement (core.mjs:9845:25) в ComponentFactory.create (core.mjs:21617:13) в ApplicationRef.bootstrap (core.mjs:26556:42) в core.mjs:26239:64 в Array.forEach() в PlatformRef._moduleDoBootstrap (core.mjs:26239:44) в core.mjs:26209:26 в _ZoneDelegate.invoke (zone.js:372:1)

0 ответов

Другие вопросы по тегам