Angular 9 - Проблема с маршрутизацией одного SPA - PullRequest
Новая
       68

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

0 голосов
/ 06 мая 2020

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

Я создал несколько небольших приложений angular 9, которые я импортирую на базовую c 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» angular маршруты на «localhost: 4200 / dets », которого, конечно, не существует. Есть ли у кого-нибудь идеи о том, что мне не хватает? Любая помощь будет принята с благодарностью!

...