Модуль ленивой загрузки — важная функция, которая помогает повысить производительность приложения Angular. Эта функция удивительна и решает большинство случаев использования.

Недавно я столкнулся с пользовательским сценарием, в котором мне нужно условно загрузить модуль для пути маршрута. Сценарий заключается в том, что если пользователю назначено какое-то разрешение, то он загружает модуль или загружает другой модуль.

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

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

const routes: Routes = [{
       path:'view',
       loadChildren: () => import('./modules/view/view.module')
                                .then(x => x.ViewModule)
}];
@NgModule({
   imports: [RouterModule.forRoot(routes, { useHash: true })],
   exports: [RouterModule]
})
export class AppRoutingModule { }

Чтобы решить эту проблему, я использую события маршрутизатора для изменения определения метода loadChildren. Мы можем прослушивать событие RouteConfigLoadStart, которое будет запущено перед загрузкой ленивых модулей.

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

import { Component } from '@angular/core';
import { RouteConfigLoadStart, Router } from '@angular/router';
@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Conditionally lazy load modules';
  enableEdit = false;
 constructor(private router: Router) {
  this.router.events.subscribe((x) => {
    console.log(x);
    if (x instanceof RouteConfigLoadStart && x.route.path === 'viewedit') {
        x.route.loadChildren = () => {
          if (!this.enableEdit) {
            return import('./modules/view/view.module').then((mod) => mod.ViewModule);
   } else {
       return import('./modules/edit/edit.module').then((mod) => mod.EditModule);
    }
   };
  }
 });
}
. . . 
}

Полный рабочий пример можно найти в StackBlitz ниже.



Отложенная условная загрузка Angular — StackBlitz
Стартовый проект для приложений Angular, который экспортирует в Angular CLI stackblitz.com



Не стесняйтесь обратиться ко мне. Удачного кодирования!!