=====Ленивая Загрузка NgModules с роутами=====
Иногда вы хотите загружать код только тогда, когда пользователю это нужно, и с помощью 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 загружался, загружал его и регистрировал определенные маршруты из него.