2

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

我创建了一些小的 angular 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>“header”应用程序的登录页面上有一个类似这样的链接：<a [routerLink]="['./dets']">Dets</a>但不是在主应用程序中路由到“localhost:4200/header/dets”，而是到“localhost:4200/dets”的角度路由，这当然不会不存在。有人对我缺少什么有任何想法吗？任何帮助将不胜感激！

4

1 回答 1

-1

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

于 2021-02-19T18:29:39.080 回答