使用Angular 7无法在子组件中访问子行

Question

I just started to learn Angular 7 and I'm a little confused about routing. I created a route configuration in app-routing module and child row in message-routing module.

I expect these routes:

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

But routes inside messageComponent are not accessible:

Cannot match any routes. URL Segment: 'message/new'

These are my configurations:

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]
})

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

And this is my folder structure:

Answer 1

Here is an example :

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

app-routing.module.ts

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

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

And in app.module.ts :

...
import:[
   ChildRoutingModule,
   AppRoutingModule
]

Answer 2

I solved the problem by Adding Inbox and New components to the message-routing.module.ts. I'm not sure if here is the best place to add them but this solved the problem.

message-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]
})