0

我有 3 个应用程序：root-config (single-spa)、navbar-app (port 4201 angular 12) angular-app (port 4202 angular 12)

  1. 我的根配置应用程序（本地主机：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']
});
  1. 我的 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 {
}
  1. NavBarAppmenu.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. 如何实现 myNavBarAppmenu.component 在登录后/或何时需要时在所有子应用程序中保持可见？

  2. 如何login.component在浏览器中从 root-config 应用程序加载 myNavBarApp 时默认实现（之后无需手动输入“/login”）

  3. 单个 spa 文档说：single-spa Layout Engine is optional at this time but is recommended if you foresee utilizing server side rendering..所以我没有服务器渲染...这就是为什么我不实现布局，并且想知道没有它怎么可能？

  4. 为什么总是返回getAppNames() 空getMountedApps()数组？

4

0 回答 0