Дочерняя строка недоступна в дочернем компоненте, использующем Angular 7

Question

Я только начал изучать Angular 7, и я немного запутался в маршрутизации. Я создал конфигурацию маршрута в модуле маршрутизации приложений и дочернюю строку в модуле маршрутизации сообщений.

Я ожидаю эти маршруты:

/
/message
/message/inbox
/message/new
/about

Но маршруты внутри messageComponent недоступны:

Не может соответствовать ни одному маршруту. Сегмент URL: «сообщение / новый»

Это мои конфигурации:

приложение-routing.module.ts:

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'message',
    component: MessageComponent
  },
  {
    path: 'about',
    component: AboutComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

сообщение-routing.module.ts:

const routes: Routes = [
  {
    path: 'message',
    component: MessageComponent,
    children: [
      {
        path: '',
        component: InboxComponent
      },
      {
        path: 'new',
        component: NewComponent
      }
    ]
  }
];

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

app.module.ts:

@NgModule({
  declarations: [
    AppComponent,
    MessageComponent,
    HomeComponent,
    AboutComponent,
  ],
  imports: [
    BrowserModule,
    MessageRoutingModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

И это моя структура папок:

Answer 1

Я решил проблему, добавив компоненты Inbox и New в message-routing.module.ts. Я не уверен, что это лучшее место для их добавления, но это решило проблему.

сообщение-routing.module.ts:

const routes: Routes = [
  {
    path: 'message',
    component: MessageComponent,
    children: [
      {
        path: '',
        component: InboxComponent
      },
      {
        path: 'new',
        component: NewComponent
      }
    ]
  }
];

@NgModule({
  declarations: [InboxComponent, NewComponent],
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

Answer 2

Вот пример:

ребенок-routing.module.ts

const routes: Routes = [
  {
    path: 'child,
    component: ChildComponent
    canActivate: [YourGuard],
    children: [{
      path: '',
      component: ChildAComponent
    },
    {
      path: 'some-route',
      component: ChildBComponent
    }]
  }
];

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

приложение-routing.module.ts

const routes: Routes = [
  {
    path: 'other-route,
    component: OtherComponent
  }
];

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

А в app.module.ts :

...
import:[
   ChildRoutingModule,
   AppRoutingModule
]