Ngx-conditional-child-routes NPM

ngx-conditional-child-routes

Lightweight Angular library for conditionally lazy-loading child routes.

About

A lightweight Angular library that makes it super-easy to conditionally lazy-load child routes.

Installation

npm install --save ngx-conditional-child-routes

If you are using yarn

yarn add ngx-conditional-child-routes

Getting Started

Initialize NgxConditionalChildRoutes in your Angular app's main.ts file.

import { NgxConditionalChildRoutes } from 'ngx-conditional-child-routes';

// ...

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then((m) => NgxConditionalChildRoutes.init(m.injector)) /* Set the injector */
  .catch((err) => console.error(err));

Create your conditional route loader Your loader should implement one of the following interfaces. Refer to sample implementation provided below.

export interface INgxConditionalChildRoutesLoader {
  loadModule(): Observable<Promise<Type<any>>>;
}

export interface INgxConditionalChildRoutesLoaderWithData<T> {
  loadModule(data?: T): Observable<Promise<Type<any>>>;
}

import { NGX_CONDITIONAL_ROUTES_LOADER } from 'ngx-conditional-child-routes';

providers: [
  {
    provide: NGX_CONDITIONAL_ROUTES_LOADER,
    useExisting: CustomRoutesLoader,
  }
]

Conditionally lazy-load your child routes

import { NgxConditionalChildRoutes } from 'ngx-conditional-child-routes';

RouterModule.forRoot([
  // ... other routes
  {
    path: 'dashboard',
    loadChildren: () => NgxConditionalChildRoutes.load(),
  },
])

Example: Custom Child Route Loader

Here's a sample implementation of the child route loader, with the loadModule() method returning an Observable of (lazy-loaded) module.

import { Type } from '@angular/core';
import { Observable } from "rxjs";

@Injectable({ providedIn: 'root' })
export class CustomRoutesLoader implements INgxConditionalChildRoutesLoader {
  constructor(private authService: AuthService) {}

  loadModule(): Observable<Promise<Type<any>>> {
    return this.authService.role$.pipe(
      map((role) => {
        switch (role) {
          case UserRole.user:
            return import('../modules/user/user.module').then(
              (m) => m.UserModule,
            );
          case UserRole.admin:
            return import('../modules/admin/admin.module').then(
              (m) => m.AdminModule,
            );
        }
      }),
    );
  }
}

Pass data to Child Route Loader

If you need to pass data to your conditional route loader, you need to implement INgxConditionalChildRoutesLoaderWithData<T> interface.

export enum PageType {
  Dashboard,
  Profile
}

@Injectable({ providedIn: 'root' })
export class CustomRoutesLoader implements INgxConditionalChildRoutesLoader<PageType> {
  loadModule(data: PageType): Observable<Promise<Type<any>>> {
    // ...
  }
}

And then just pass the data while loading the modules.

RouterModule.forRoot([
  // ... other routes
  {
    path: 'dashboard',
    loadChildren: () => NgxConditionalChildRoutes.load(MyEnum.Dashboard),
  },
])