single-spa - デフォルトのアプリにデフォルトのコンポーネントをロードし、次に別のサブアプリにリダイレクトする方法は?

Question

私は3つのアプリを持っています: root-config (single-spa), navbar-app (ポート 4201 angular 12) angular-app (ポート 4202 angular 12)

1. 私の root-config アプリ (localhost:9000) には root-config.ts

registerApplication({
    name: "@org1/myNavbarApp",
    app: () => System.import("@org1/myNavbarApp"),
    activeWhen: ["/"],
});

registerApplication({
    name: "@org1/myAngularApp",
    app: () => System.import("@org1/myAngularApp"),
    activeWhen: ['/angular']
});

2. 私のmyNavbarAppにはapp-routing.module.ts

const routes: Routes = [
  {
    path: 'login', component: LoginComponent,
  }, {
    path: 'menu',
    component: MenuComponent,
  },
  {path: '**', component: EmptyRouteComponent}, // <-- will display angular app but will not 
leave <mat-toolbar> in view from myNavBarApp ( only if i stay in localhost:4200/menu 
and do refresh -> angular app default view displays under <mat-toolbar> of 
myNavBarApp ( as expected behavior ) 

// {path: '**', redirectTo: 'login'},  // <-- renders default "login.component" on first load 
of localhost:9000 (exactly what i need) but will cause next issue: 
after navigateToUrl('angular') is done - ```login.component``` angular app content 
are visible in the same page - ( not expected behavior )

];

const config: ExtraOptions = {
  useHash: false,
  enableTracing: false,
  relativeLinkResolution: 'legacy',
};


@NgModule({
  imports: [RouterModule.forRoot(routes, config)],
  exports: [RouterModule],
  providers: [{provide: APP_BASE_HREF, useValue: '/'}]

})
export class AppRoutingModule {
}

3. NavBarApp にmenu.component.htmlは次のものが含まれています。

<mat-toolbar color="warn" class="toolbar">
  <mat-button-toggle-group class="menu">
    <mat-button-toggle (click)="singleSpaNavigateUrl('angular')" value="angular">Angular App</mat-button-toggle>
  </mat-button-toggle-group>
</mat-toolbar>

次のmenu.component.ts ものが含まれます:

import {getAppNames, navigateToUrl, getMountedApps} from "single-spa";

public singleSpaNavigateUrl(url: string) {
  console.log('appNames', getAppNames()); <-- IS ALWAYS EMPTY ARRAY , Why ?
  console.log('mountedAppNames', getMountedApps()); <-- IS ALWAYS EMPTY ARRAY , Why ?

  navigateToUrl('/'+ url); // <-- navigates to /angular
}

1. myNavBarApp を実現する方法menu.component は、ログイン後または必要なときにすべての子アプリで表示されたままになりますか?

2. myNavBarApp がブラウザの root-config アプリからロードされたときにデフォルトとして達成する方法login.component(その後「/login」を手動で入力せずに)

3. シングルスパのドキュメントには次のように書かれています：single-spa Layout Engine is optional at this time but is recommended if you foresee utilizing server side rendering..だから私はサーバーレンダリングを持っていません...だから私はレイアウトを実装していません。

4. なぜgetAppNames() andgetMountedApps()常に空の配列を返すのですか?