问题：带有 Angular Parcel 的单个 Spa，在 Parcel 内进行动态路由

Question

描述错误或问题

我正在使用 Single Spa 创建一个微前端。包裹是有角度的。包裹包含 2 个组件：支付组件和成功组件。

我的问题是如何使用单个 spa 在同一包裹内动态导航多个组件。我一直在寻找示例，但在其中我都没有找到使用 angular 的包裹内的内部导航。我也不知道这是否可行，因为我正在查看有关使用 Angular 和 registerApplication 以及 Module Federation 在 single-spa 中进行路由的文档，但两者都没有。

重现

我已经创建了 2 个存储库，第一个只有角度项目在运行。 https://github.com/AlvaroGuGo303/AngularDemo1

执行
npm start
导航到
http://localhost:4400/
。如果您更改任何源文件，应用程序将自动重新加载。

和第二个，其中实施了单个水疗中心，并且角度项目作为一个包裹。 https://github.com/AlvaroGuGo303/AngularSingleSpaDemo2

执行
npm start
打开另一个终端并执行：
cd parcel1Angular/demo
npm start
导航到
http://localhost:9000/
。如果您更改任何源文件，应用程序将自动重新加载。

我要说的问题是

microfrontend-layout.html

在

<single-spa-router>

的部分在定义路线时，这是无法做到的，因为如果不是把

<route path="parcel1">

你把

<route default>

然后就可以了。但是接下来的问题是，如果你想添加更多的包裹，你怎么不一次显示所有包裹。

预期行为

预期的行为是能够像 AngularDemo1 项目独立执行的那样使用单个 spa 在角度包裹内导航。

屏幕截图和/或控制台输出

（我的个人资料不能显示截图）

单 Spa 根容器

微前端布局.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.componente.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 { }

附加上下文

带有 Angular Parcel 的单个 Spa，在 Parcel 内进行动态路由

问题：带有 Angular Parcel 的单个 Spa，在 Parcel 内进行动态路由

问题描述投票：0回答：0

最新问题

问题：带有 Angular Parcel 的单个 Spa，在 Parcel 内进行动态路由

问题描述 投票：0回答：0

最新问题

问题描述投票：0回答：0