Как angular маршрут для субмодулей?

Question

В моем приложении angular есть модуль dashboard. И мой app.module.ts подобен следующему.

@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DashboardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

И app-routing.module.ts равен

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

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

И dashboard.route.ts равен

const dashboardRoutes: Routes = [
    { path: 'dashboard', component: DashboardComponent }
]

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

Но приложение это маршрутизация на PageNotFoundComponent всегда.

Answer 1

Ваши концепции маршрутизации не верны. Проще говоря, вы должны сделать:

• в app-routing.module.ts:

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', loadChildren: 'path/to/dashboard.module#DashboardModule' },
  { path: '**', component: PageNotFoundComponent }
];

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

• и в dashboard-route.module .ts:

const routes: Routes = [
    { path: '', component: DashboardComponent }
]

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

• не забудьте, что у вас должен быть dashboard.module.ts с именем класса "DashboardModule", куда вы импортируете dashboard-rote.module.ts, для того, чтобы это работало.

Answer 2

Изменить порядок импорта AppRoutingModule и DashboardModule следующим образом.

@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    DashboardModule,
    AppRoutingModule,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 3

Вам необходимо импортировать модуль маршрутизации при отложенной загрузке. Вы можете изменить:

{ path: '', redirectTo: '/dashboard', pathMatch: 'full' }

на

{
    path: '',
    loadChildren:
        '../../dashboard.module#DashboardModule'
}

Документы: Ленивая загрузка