javascript - Angular 7 を使用している子コンポーネントでは子行にアクセスできません

Question

Angular 7 の学習を始めたばかりで、ルーティングについて少し混乱しています。app-routing モジュールでルート構成を作成し、message-routing モジュールで子行を作成しました。

私はこれらのルートを期待しています：

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

ただし、me​​ssageComponent 内のルートにはアクセスできません。

一致するルートはありません。URL セグメント: 「メッセージ/新規」

これらは私の構成です：

app-routing.module.ts:

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

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

メッセージルーティング.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 { }

そして、これは私のフォルダー構造です：