Angular 9-单SPA子路由问题

Question

我一直在寻找这个问题的答案，但我不能，如果这个问题已经被问到了，很抱歉！

我已经创建了一些小的angular 9应用程序，我正在使用单个spa导入到一个基本的html页面。我的应用程序在本地的不同端口上运行，我的import语句如下所示：

  <script type="systemjs-importmap">
  {
    "imports": {
      "footer": "http://localhost:4201/main.js",
      "dashboard": "http://localhost:4202/main.js",
      "header": "http://localhost:4300/main.js",
      "single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.5/system/single-spa.min.js"
    }
  }
</script>

我在我的html页面中有路由，所以应用程序显示在不同的路由上，这是我导入的应用程序注册中的一项：

    System.import('single-spa').then(function (singleSpa) {
  singleSpa.registerApplication(
    'header',
    function () {
      return System.import('header');
    },
    function (location) {
      return location.pathname.startsWith('/header');
      // return true;
    }
  )

THis运行得很好，我的简单应用程序也能正常显示。当我试图将一些子页面添加到我的简单应用程序中并路由到我的主"shell“应用程序中时，出现了问题，如果我导航到"localhost:4200/header"，我导入的"header”应用程序就会正确显示。如果我尝试在应用程序中导航到子页面，例如，我在"header“应用程序”app -routing-module“中设置了这个子路由：

  { path: '**', component: EmptyRouteComponent, children: [
{path: 'sub-details', component: DetailsComponent}

] }，

什么都没发生。我在"header“应用程序的登录页面上有一个<router-outlet></router-outlet>，并带有一个类似这样的链接：<a [routerLink]="['./dets']">Dets</a>，而不是在主应用程序中路由到"localhost:4200/header/dets”，而是路由到当然不存在的"localhost:4200/dets“。有人知道我错过了什么吗？任何帮助都将不胜感激！

Answer 1

这似乎与单spa- Angular‘配置路由’部分single-spa.js.org/docs/ecosystem-angular/#configure-routes中提到的注释直接相关。“建议使用'/‘作为APP_BASE_HREF，并在每个路由组件和路由器链接中重复您的Angular应用程序的url前缀。如果您在Angular应用程序活动功能中设置了/angular，当url以此值开始时，您将不得不在所有链接中添加/angular前缀。”- filoxo