Иногда вы хотите загружать код только тогда, когда пользователю это нужно, и с помощью Angular это в настоящее время возможно с помощью маршрутизатора и Feature NgModules. Маршрутизатор имеет возможность ленивой загрузки NgModules, когда пользователь запрашивает определенный роут.

Лучший способ начать — создать Feature NgModule для уникальных частей маршрута. Возможно, вам захочется сгруппировать более одного роута, если они почти всегда используются вместе. Например, если у вас есть страница учетной записи клиента с несколькими подстраницами для управления реквизитами учетной записи, более чем вероятно, что вы объявите их как часть одного и того же NgModule.

Нет никакой разницы в том, как вы определяете сам NgModule, за исключением того, что вам нужно определить некоторые маршруты с помощью RouterModule.forChild() . У вас должен быть один маршрут с пустым путём, который будет действовать как корневой маршрут для этого Feature NgModule, и все остальные маршруты зависают от него:

@NgModule({
  declarations: [
    ForumComponent,
    ForumsComponent,
  ],
  imports: [
    CommonModule,
    FormsModule,
    RouterModule.forChild([
      {path: '', component: ForumsComponent},
      {path: ':forum_id', component: ForumComponent}
    ])
  ],
  providers: [
    ForumsService
  ]
})
export class ForumsModule { }

Существует важное изменение в поведении, которое не является очевидным, связанным с тем, как провайдеры регистрируются в приложении. Поскольку это лениво загруженный NgModule, провайдеры недоступны остальной части приложения. Это важное различие и должно учитываться при планировании архитектуры приложения. Здесь очень важно понять, как работает вставка зависимостей Angular.

Чтобы загрузить ленивый роут, основной AppModule определяет путь к этому Feature NgModule. Для этого вам нужно будет обновить конфигурацию корневого маршрутизатора для нового маршрута. В этом примере показано, как определить ленивый загруженный роут, задав ему свойства path и loadChildren:

const routes: Routes = [
  {
 path: 'forums',
 //canLoad - позволяет добавить гварды на модуль
  // loadChildren: 'app/forums/forums.module#ForumsModule',canLoad:[]}
 loadChildren: 'app/forums/forums.module#ForumsModule'
  },
  {
 path: '',
 component: HomeComponent
  }
];

Синтаксис свойства loadChildren — это строка, которая имеет путь к файлу NgModule (без расширения файла), символ #, а затем имя класса loadChildren: ‘path/to/module#ModuleName. Angular использует это, чтобы знать, где загрузить файл во время выполнения, и узнать имя NgModule.

Путь к ленивому загруженному маршруту определяется на корневом уровне маршрутов, поэтому ленивый загруженный NgModule даже не знает конкретно, каким будет путь для его маршрута. Это делает их более многоразовыми и позволяет приложению знать, когда лениво загружать NgModule. Подумайте о ленивом загруженном NgModule, определяющем все маршруты как относительные пути, а полный путь обеспечивается путем объединения корневого маршрута и ленивых загруженных маршрутов.

Например, если вы посетите / маршрут в этом приложении, он загрузит ForumsModule и ForumsModule не будет загружен. Однако, как только пользователь нажимает ссылку для просмотра форумов, он замечает, что для пути / ForumsModule требуется, чтобы ForumsModule загружался, загружал его и регистрировал определенные маршруты из него.