如何在Single Spa的Angular Parcel中实现内部动态路由？

我正在用Single Spa构建微前端，其中一个Parcel采用Angular实现，包含Payment组件与Success组件。现需实现同一Parcel内多组件的动态导航，但未找到相关示例，也不确定是否可行。查阅Single Spa Angular路由、registerApplication及Module Federation文档后仍无头绪。

示例项目 #

• 独立Angular项目：AngularDemo1，执行npm start后访问http://localhost:4400/即可运行
• 集成Single Spa的项目：AngularSingleSpaDemo2，执行npm start后，在另一个终端进入parcel1Angular/demo执行npm start，访问http://localhost:9000/运行

核心问题 #

microfrontend-layout.html的<single-spa-router>路由配置存在问题：使用<route path="parcel1">时无法实现内部导航，改用<route default>可运行，但添加多个Parcel时会同时显示所有内容。期望实现像独立Angular项目AngularDemo1那样的Parcel内部导航效果。

Single-Spa根容器配置 #

microfrontend-layout.html #

<single-spa-router>
  <main>
    <route path="parcel1">
      <application name="@microfrontend/parcel1Angular"></application>
    </route>
  </main>
</single-spa-router>

index.ejs #

.....
  <% if (isLocal) { %>
  <script type="systemjs-importmap">
    {
      "imports": {
        "@microfrontend/root-config": "http://localhost:9000/microfrontend-root-config.js",
        "@microfrontend/parcel1Angular": "http://localhost:4200/main.js"
      }
    }
  </script>
  <% } %>
.....

microfrontend-root-config.ts #

import { registerApplication, start } from "single-spa";
import {
  constructApplications,
  constructRoutes,
  constructLayoutEngine,
} from "single-spa-layout";
import microfrontendLayout from "./microfrontend-layout.html";

const routes = constructRoutes(microfrontendLayout);
const applications = constructApplications({
  routes,
  loadApp({ name }) {
    return System.import(name);
  },
});
const layoutEngine = constructLayoutEngine({ routes, applications });

applications.forEach(registerApplication);
layoutEngine.activate();
start();

Single-Spa Angular Parcel配置 #

index.html #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <base href="/parcel1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-b-root></app-b-root>
</body>
</html>

app-component.html（选择器为app-b-root） #

<app-nav></app-nav>
<router-outlet></router-outlet>

nav.component.html #

<nav>
  <ul>
    <li>
      <a aria-current="page" routerLink="/">Payment</a>
    </li>
    <li>
      <a routerLink="/success">Success</a>
    </li>
  </ul>
</nav>

app-routing.module.ts #

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {PaymentComponent} from "./payment/payment.component";
import {SuccessComponent} from "./success/success.component";

const routes: Routes = [
  { path: '', component: PaymentComponent },
  { path: 'success', component: SuccessComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

内容的提问来源于stack exchange，提问作者Alvaro Guillen Gonzalez