Angular loadChildren ничего не делает

Question

Я следую вместе с курсом по Угловые основы в PluralSight, создавая сайт управления событиями с пользовательским модулем и модулем событий. (Курс не помещает управление событиями в функциональный модуль, но я сделал это самостоятельно.) Я следовал инструкциям, чтобы позволить каждому модулю обрабатывать свою собственную маршрутизацию, используя loadChildren на верхнем уровне маршрутизация:

app.routes.ts

import { Routes } from '@angular/router';
import { NotFoundComponent } from './utility/not-found.component';

export const appRoutes: Routes = [
  { 
      path: 'events', 
      loadChildren: './events/events.module#EventsModule'
  },
  { path: 'user', loadChildren: './user/user.module#UserModule'},
  { path: 'NotFound', component: NotFoundComponent },
  { path: '', redirectTo: '/events', pathMatch: 'full' },
  { path: '**', component: NotFoundComponent }
];

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { appRoutes } from './app.routes';

import { AppComponent } from './app.component';
import { SharedModule } from './common/shared.module';
import { NavBarComponent } from './nav/navbar.component';
import { EventService } from './events/event.service';
import { ToastrService } from './common/toastr.service';
import { NotFoundComponent } from './utility/not-found.component';
import { UserModule } from './user/user.module';
import { EventsModule } from './events/events.module';


@NgModule({
  declarations: [
    AppComponent,
    NavBarComponent,
    NotFoundComponent
  ],
  imports: [
    BrowserModule,
    SharedModule,
    EventsModule,
    UserModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [
    EventService,
    ToastrService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Тогда, предположительно, если я хочу, чтобы / events отображал список событий, / events / create , чтобы отобразить страницу для ввода нового события, и / events / 3 , чтобы отобразить детали события с id = 3, у меня должно быть следующее. Согласно курсу, подтвержденному собственной экспозицией Angular по теме , я должен указывать только подпути, исключая сегмент «событий», который предположительно уже учтен маршрутизацией на уровне приложения.

С event.routes.ts

export const eventRoutes: Routes = [
    { path: 'create', component: CreateEventComponent, canDeactivate: [UnsavedNewEventGuard] },
    { path: ':id', component: EventDetailsComponent, canActivate: [ValidEventGuard] },
    { path: '', component: EventsListComponent }
];

events.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { eventRoutes } from './event.routes';
import { EventsListComponent } from './event-list/events-list.component';
import { CreateEventComponent } from './create-event/create-event.component';
import { EventThumbnailComponent } from './event-list/event-thumbnail.component';
import { EventDetailsComponent } from './event-details/event-details.component';

@NgModule({
  declarations: [
    EventsListComponent,
    CreateEventComponent,
    EventThumbnailComponent,
    EventDetailsComponent,
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(eventRoutes)
  ]
})
export class EventsModule { }

Это не работает. Вместо этого он отображает список событий непосредственно для пути / (то есть https://localhost:4200/,, который не перенаправляет). Он не будет перенаправлен в / events, / events / create или /events/3.

Когда я указываю полный путь, включая сегмент «события», который, как я думал, мне не нужен, , тогда приложение работает :

event.routes.ts (версия 2)

export const eventRoutes: Routes = [
    { path: 'events/create', component: CreateEventComponent, canDeactivate: [UnsavedNewEventGuard] },
    { path: 'events/:id', component: EventDetailsComponent, canActivate: [ValidEventGuard] },
    { path: 'events', component: EventsListComponent }
];

Либо вложенные подпути в свойство children под родительским путем для "events" также работают:

event.routes.ts (версия 3)

export const eventRoutes: Routes = [{
  path: 'events', children: [
    { path: 'create', component: CreateEventComponent, canDeactivate: [UnsavedNewEventGuard] },
    { path: ':id', component: EventDetailsComponent, canActivate: [ValidEventGuard] },
    { path: '', component: EventsListComponent }
  ]
}];

Но версии 2 и 3 работают независимо от того, есть ли у меня маршруты с атрибутом loadChildren в моем файле маршрутизации уровня приложения . Приложение вполне доволен этим:

app.routes.ts (версия 2)

import { Routes } from '@angular/router';
import { NotFoundComponent } from './utility/not-found.component';

export const appRoutes: Routes = [
  { path: 'NotFound', component: NotFoundComponent },
  { path: '', redirectTo: '/events', pathMatch: 'full' },
  { path: '**', component: NotFoundComponent }
];

По существу, маршруты loadChildren игнорируются. (То же самое относится и к пользовательскому модулю.) Я не могу понять, почему.

Answer 1

Вы импортируете модуль в свой app.module.ts. Причина, по которой ваши «версии 2 и 3» работают, потому что модули импортированы в ваш AppModule. Чтобы ленивая загрузка работала, вам нужно удалить EventsModule и UserModule из вашего AppModule:

@NgModule({
  declarations: [...],
  imports: [
    BrowserModule,
    SharedModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [...],
  bootstrap: [AppComponent]
})
export class AppModule { }

Также может потребоваться перезапустить ng serve после добавления новых модулей для отложенной загрузки.