Angular — Как подгрузить модуль по требованию?

В Angular основным механизмом для подгрузки модулей по требованию является механизм ленивой загрузки модулей. Ленивая загрузка модулей позволяет отложить загрузку модуля до тех пор, пока он не будет фактически необходим. Это помогает оптимизировать загрузку приложения, так как не все модули необходимы одновременно.

Для подгрузки модуля по требованию с помощью ленивной загрузки в Angular вы можете использовать маршрутизацию. В маршрутизации можно определить маршрут, который будет загружать модуль только при необходимости.

Для этого вам потребуется выполнить следующие шаги:

Шаг 1: Создайте отдельный модуль для ленивой загрузки. Для этого вы можете использовать Angular CLI команду ng generate module module-name --route route-path. Например, для создания модуля с именем LazyModule и путем /lazy, вы можете выполнить команду ng generate module lazy --route lazy.

Команда ng generate module создаст для вас модуль lazy.module.ts и маршрутизационный модуль lazy-routing.module.ts.

Шаг 2: В файле app-routing.module.ts определите маршрут для ленивой загрузки модуля. Добавьте RouterModule и Routes из @angular/router в ваш app-routing.module.ts. Затем добавьте маршрут для ленивой загрузки модуля, указав путь и путь до файла модуля.

Например, если у вас уже есть другие маршруты, вы можете добавить маршрут для ленивой загрузки модуля следующим образом:

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

const routes: Routes = [
  // другие маршруты
  {
    path: 'lazy',
    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
  }
];

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

Шаг 3: Импортируйте AppRoutingModule модуль в app.module.ts и добавьте его в раздел imports.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

После выполнения этих шагов Angular будет автоматически загружать модуль LazyModule по требованию, когда пользователь перейдет по маршруту /lazy. Это происходит благодаря использованию функции loadChildren, которая определена в маршруте.

Таким образом, модуль будет загружаться только тогда, когда необходимо, что позволяет оптимизировать загрузку приложения и уменьшить время его запуска.