ngx-conditional-child-routes

Lightweight Angular library for conditionally lazy-loading child routes.

Table Of Contents

• About
• Installation
• Getting Started
  • Example: Custom Child Route Loader
  • Pass data to Child Route Loader
• Contributing
• License

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

1. 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));

2. 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>>>;
   }

3. Register your conditional route loader in the root module

   import { NGX_CONDITIONAL_ROUTES_LOADER } from 'ngx-conditional-child-routes';
      
   providers: [
     {
       provide: NGX_CONDITIONAL_ROUTES_LOADER,
       useExisting: CustomRoutesLoader,
     }
   ]

4. 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),
  },
])

Contributing

Any contributions to make this project better are much appreciated. Please follow the following guidelines before getting your hands dirty.

• Fork the repository
• Run yarn
• Make your changes, and don't forget to add unit tests.
• Run lint

  npm run lint

• Run test

  npm run test

• Commit/Push any changes to your repository
• Open a pull request

License

Distributed under the MIT License. See LICENSE for more information.

Acknowledgements

• Nx