Как в Angular сделать умный lazy loading модулей после перехода на определённый роут либо по значениям?

В Angular для реализации умного lazy loading модулей после перехода на определенный роут или по значениям можно использовать следующий подход:

1. Создайте необходимые модули, которые должны быть загружены лениво (lazy loaded) при определенных условиях. Например, представим, что у вас есть модули "AdminModule" и "UserModule", которые должны быть загружены только при переходе на соответствующие роуты "/admin" и "/user".

2. Создайте основной маршрутизатор (app-routing.module.ts), используя Angular Router. Определите основные маршруты приложения, а также добавьте дополнительные маршруты для lazy loading модулей.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },
  { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) },
  // Другие основные маршруты
];

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

3. В модулях, которые должны быть загружены лениво, добавьте дополнительные маршруты используя Angular Router. Например, представим, что у вас есть дополнительные страницы в модуле "AdminModule" и "UserModule", которые должны быть загружены только при переходе по значениям "settings" и "profile".

**admin-routing.module.ts**:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { SettingsComponent } from './settings/settings.component';

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent },
  { path: 'settings', component: SettingsComponent },
  // Другие маршруты
];

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

**user-routing.module.ts**:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'profile', component: ProfileComponent },
  // Другие маршруты
];

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

4. Наконец, импортируйте модули маршрутизации для каждого lazy loaded модуля в соответствующем модуле.

**admin.module.ts**:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminRoutingModule } from './admin-routing.module';
import { DashboardComponent } from './dashboard/dashboard.component';
import { SettingsComponent } from './settings/settings.component';

@NgModule({
  declarations: [DashboardComponent, SettingsComponent],
  imports: [
    CommonModule,
    AdminRoutingModule
  ]
})
export class AdminModule { }

**user.module.ts**:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserRoutingModule } from './user-routing.module';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';

@NgModule({
  declarations: [HomeComponent, ProfileComponent],
  imports: [
    CommonModule,
    UserRoutingModule
  ]
})
export class UserModule { }

Теперь при обращении к роутам "/admin" и "/user" соответствующие модули будут загружаться лениво только в момент перехода на эти роуты. А при обращении к "/admin/settings" и "/user/profile" соответствующие страницы также будут загружаться лениво после перехода на эти роуты. Остальные части вашего приложения будут загружаться и запускаться независимо от этого.