Question

我一直在寻找解决这个问题的方法，但我不能，如果已经提出这个要求，我深表歉意！

我创建了一些小角度9应用程序，这些应用程序将使用单个spa导入到基本的html页面中。我的应用程序在本地不同的端口上运行，我的导入语句如下：

  <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;
    }
  )

一切正常，我的简单应用程序应有的出现。当我尝试将一些子页面添加到我的简单应用程序中并路由到主“ shell”应用程序中的页面时，就会出现问题，如果我导航到“ localhost：4200 / header”，则导入的“ header”应用程序会正确显示。如果我尝试在该应用程序中导航到子页面，例如我在“标题”应用程序“ app-routing-module”中设置的子路由：

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

]}，

什么都没发生。我在“标题”应用的着陆页上有一个<router-outlet></router-outlet>以及一个类似这样的链接：<a [routerLink]="['./dets']">Dets</a>，而不是在主应用中路由到“ localhost：4200 / header / dets”成角路由到“ localhost：4200 / dets”当然不存在。有人对我缺少的东西有任何想法吗？任何帮助将不胜感激！

Answer 1

这似乎与 single-spa-angular '配置路由' 部分中提到的注释直接相关 single-spa.js.org/docs/ecosystem-angular/#configure-routes "[It] 建议使用 '/ ' 作为 APP_BASE_HREF 并在每个路由组件和路由器链接中为您的 Angular 应用程序重复 url 前缀。如果您在 Angular 应用程序活动函数中设置 /angular 以在 url 以该值开头时挂载，则必须在其中添加 /angular 前缀所有链接。” – 菲洛索

Angular 9-单个SPA子路由问题

1 个答案: