Angular 6: резервный маршрут forChild перезаписывает дочерний маршрут

Question

Я немного застрял с маршрутами forRoot / forChild, как вы можете видеть в этом стеке бликов:

https://stackblitz.com/edit/hello-angular-6-thzmnv

В корневом модуле определен маршрут 'sub-route':

const routes: Routes = [
  {
    path: 'sub-route',
    loadChildren: () => SubModule,
  },
];

@NgModule({
  imports:      [
    BrowserModule,
    SubModule,
    RouterModule.forRoot(routes),
    SubRoutingModule
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

в модуле вспомогательного маршрутизатора определены маршруты поиска:

const routes: Routes = [
  {
    path: '',
    component: SubComponent,
  },
  {
    path: 'first',
    component: SubComponent,
    data: { index: 1 },
  },
  {
    path: 'second',
    component: SubComponent,
    data: { index: 2 },
  },
  {
    path: '**',
    redirectTo: 'first',
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class SubRoutingModule {}

Я не понимаю, почему запасной маршрут ** не работает должным образом.

Переход к /sub-route/second будет перенаправлять, например, на /first. Почему происходит перенаправление, если определен подходящий маршрут? И если по какой-то причине происходит перенаправление, почему оно не перенаправляется на /sub-route/first, а на /first? Спасибо!

Answer 1

Удалите SubRoutingModule и SubModule из AppModule и добавьте SubRoutingModule внутри SubModule из-за отложенной загрузки.

import { NgModule } from '@angular/core';
import { SubComponent } from './sub.component';
import { SubRoutingModule } from './sub-routing.module';

@NgModule({
  declarations: [
    SubComponent
  ],
  imports: [
    SubRoutingModule
  ],
  exports: [
    SubComponent
  ],
})
export class SubModule {}

Затем добавьте выход-маршрутизатор в subModule.

<router-outlet></router-outlet>
sub-component<br>
index: {{index}}

Answer 2

Вы определили неверный путь перенаправления

Если вы хотите вернуться к подкомпоненту, используя подстановочный маршрут, вам необходимо указать полный путь, включая родительский и дочерний. Например:

{ 
   path: '**',
   redirectTo: 'sub-route/first', }

Подстановочный маршрут по умолчанию возвращает маршрут корневого модуля ro.

Answer 3

Может быть, вы можете попробовать это

 {
    path: '**',
    redirectTo: '/sub-route/first',
  }