Angular의 조건부 지연 로드 모듈

지연 로딩 모듈은 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에서 찾을 수 있습니다.


나에게 편하게 연락해. 행복한 코딩!!