Angular 9 - проблема с маршрутизацией одного SPA

Question

Я долго искал, пытаясь найти ответ на эту проблему, но не могу, извиняюсь, если об этом уже спрашивали!

Я создал несколько небольших приложений angular 9, которые я импортирую на базовую страницу 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;
    }
  )

Все это работает хорошо, и мои простые приложения отображаются так, как должны. Проблема возникает, когда я пытаюсь добавить несколько дочерних страниц в свои простые приложения и перенаправить их к тем, которые находятся в моем основном приложении "оболочки". Если я перейду к "localhost:4200/header", импортированное мной приложение "header" отображается правильно. Если я попытаюсь перейти в этом приложении на дочернюю страницу, например, этот дочерний маршрут, который я настроил в приложении "header" app "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, которых, конечно, не существует. Есть ли у кого-нибудь идеи о том, что мне не хватает? Любая помощь будет принята с благодарностью!

Answer 1

Похоже, это напрямую связано с примечанием, упомянутым в разделе single-spa-angular «Настроить маршруты» single-spa.js.org/docs/ecosystem-angular/#configure-routes "[Рекомендуется использовать '/' в качестве APP_BASE_HREF и повторите префикс URL-адреса для вашего приложения Angular в каждом компоненте маршрута и ссылках маршрутизатора.Если вы установите / angular в функции активности приложения Angular для монтирования, когда URL-адрес начинается с этого значения, вам нужно будет добавить префикс / angular во все ссылки." - филоксо