Angular 6: forChild fallback route overwrites child route

Question

I'm a bit stuck with forRoot/forChild routes as you can see in that stackblitz:

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

In the root module the route 'sub-route' is defined:

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

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

in the sub router module the fellowing routes are defined:

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 {}

What I don't get is why the fallback route ** is not working as expected.

Navigating to /sub-route/second will redirect to just /first for example. Why is the redirect taking in place if there's a fitting route defined? And if, for some reason, the redirect is taking place why isn't it redirecting to /sub-route/first but to just /first? Thanks!

Answer 1

Remove SubRoutingModule and SubModule from AppModule and add SubRoutingModule to inside SubModule because of lazy loading.

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 {}

Then add a router-outlet to subModule also.

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