Ленивая загрузка архитектуры с нарушенной маршрутизацией

Question

Newb ie до Angular и я пытаюсь найти лучший способ модульности моих компонентов и настройки маршрутизации. Я прочитал все там, но все еще борюсь с реализацией.

Вот снимок экрана компонента боковой навигации, который будет обрабатывать маршрутизацию:

Когда вы нажимаете Гибкая учетная запись расходов меню обновляется списком подстраниц. Вот общая структура приложения.

- landing page
    - hsa
    - fsa
        - profile
        - providers
        - settings
        - dependents

Я планирую использовать следующие URL-адреса:

/plan-configuration/hsa
/plan-configuration/fsa
/plan-configuration/fsa/profile
/plan-configuration/fsa/providers
/plan-configuration/fsa/settings
/plan-configuration/fsa/dependents

Я уже определил один модуль; Мне лень загружать модуль конфигурации плана, когда пользователь покидает целевую страницу. Вот определение в app-routing.module :

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  {
    path: 'plan-configuration',
    loadChildren: () =>
      import('./plan-configuration/plan-configuration.module').then(
        p => p.PlanConfigurationModule
      )
  }
];

Кнопка на целевой странице направляет к модулю конфигурации плана:

this._router.navigate(['/plan-configuration'], { relativeTo: this.route });

Отлично. plan-configuration.component. html таков:

<div class="container">
  <navigation id="side-nav"> </navigation>
  <main id="main-content" role="main">
  <router-outlet></router-outlet>
  </main>
</div>

До этого момента все прекрасно работало. Вот мой подход для plan-configuration-routing.module :

const routes: Routes = [
  {
    path: '',
    component: PlanConfigurationComponent,
    children: [
      {
        path: 'hsa',
        component: HsaComponent
      },
      {
        path: 'fsa',
        loadChildren: () =>
          import('./fsa/fsa.module').then(m => m.FsaModule)
      },
      {
        path: '',
        redirectTo: 'hsa',
        pathMatch: 'full'
      }
    ]
  }
];

Здесь я решил сделать fsa страниц + вложенных страниц как свои собственные модуль; это все еще хорошо?

Вот маршрутизация для модуля fsa :

const routes: Routes = [
  {
    path: '',
    component: FsaComponent,
    children: [
      {
        path: 'profile',
        component: ProfileComponent
      },
      {
        path: 'providers',
        component: ProvidersComponent
      },
      {
        path: 'settings',
        component: SettingsComponent
      },
      {
        path: 'dependents',
        component: DependentsComponent
      }
    ]
  }
];

Я добавил розетку маршрутизатора к компоненту FSA , хотя я этого хочу для отображения на выходе в компоненте Plan Configuration :

<main id="main-content" role="main">
  <div class="main-content-inner">
    <router-outlet></router-outlet>
  </div>
</main>

Вот дерево компонентов в его нынешнем виде:

А вот дерево маршрутизатора:

NavigationMenuComponent - это место, где у меня есть обработчик, который выполняет маршрутизацию:

 this.router
  .navigate([this.categorySelected.code], {
    relativeTo: this.route
  })
  .then(e => {
    if (e) {
      console.log('Navigation is successful!');
    } else {
      console.log('Navigation has failed!');
    }
  });

Так что я могу успешно перейти на эту страницу: plan-configuration / fsa , но когда я нажимаю на боковую навигационную ссылку для просмотра профиля, я получаю следующую ошибку:

Error: Cannot match any routes. URL Segment: 'plan-configuration/profile'

Я добавил fsa модуль специально для обновления активированного маршрута, чтобы я мог перейти к нему, используя lativeTo , как я только что сделал здесь. Но, похоже, это не работает, потому что this.route относится к plan-configuration вместо plan-configuration / fsa - почему это так?

Мне кажется, что мой подход ленивой загрузки модуля FSA правильный, но я не думаю, что правильно собрал дерево компонентов. Кто-нибудь замечает здесь что-нибудь подозрительное? Извините, за длинную статью. Спасибо за любой вклад.