# ngx-conditional-child-routes

> Lightweight Angular library for conditionally lazy-loading child routes.

Latest version **0.1.3** (published 2023-10-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-conditional-child-routes
pnpm add ngx-conditional-child-routes
yarn add ngx-conditional-child-routes
bun add ngx-conditional-child-routes
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2023-10-03 |
| First published | 2022-03-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 18.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Gulsharan Goraya |
| Maintainers | gulsharan |
| Keywords | angular, routing, lazy, conditional |

## Links

- npm: https://www.npmjs.com/package/ngx-conditional-child-routes
- Repository: https://github.com/gulsharan/ngx-conditional-child-routes
- Issues: https://github.com/gulsharan/ngx-conditional-child-routes/issues
- npm.io page: https://npm.io/package/ngx-conditional-child-routes

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) >= 2.3.0

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 0.1.3 (latest) — 2023-10-03
- 0.1.1 — 2023-02-16
- 0.1.0 — 2022-03-21
- 0.0.9 — 2022-03-21
- 0.0.8 — 2022-03-19

## README

# ngx-conditional-child-routes
Lightweight Angular library for conditionally lazy-loading child routes.

[![GitHub release (latest by date)](https://img.shields.io/github/v/release/gulsharan/ngx-conditional-child-routes)](https://github.com/gulsharan/ngx-conditional-child-routes/releases)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/ngx-conditional-child-routes)](https://bundlephobia.com/package/ngx-conditional-child-routes)
[![NPM](https://img.shields.io/npm/l/ngx-conditional-child-routes)](https://github.com/gulsharan/ngx-conditional-child-routes/blob/main/LICENSE)
[![CircleCI](https://img.shields.io/circleci/build/gh/gulsharan/ngx-conditional-child-routes?token=96c1a7c4cc2e0a71cc6f22b30277f35d393e54ff)](https://app.circleci.com/pipelines/github/gulsharan/ngx-conditional-child-routes)
[![GitHub issues](https://img.shields.io/github/issues/gulsharan/ngx-conditional-child-routes)](https://github.com/gulsharan/ngx-conditional-child-routes/issues)

## Table Of Contents

- [About](#about)
- [Installation](#installation)
- [Getting Started](#getting-started)
  - [Example: Custom Child Route Loader](#example-custom-child-route-loader)
  - [Pass data to Child Route Loader](#pass-data-to-child-route-loader)
- [Contributing](#contributing)
- [License](#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 <kbd>main.ts</kbd> file.

    ```typescript
    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](#example-custom-child-route-loader) provided below.

    ```typescript
    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
    ```typescript
    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
    ```typescript
    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.

```typescript
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.

```typescript
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.

```typescript
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](https://github.com/gulsharan/ngx-pusher/blob/main/LICENSE) for more information.

## Acknowledgements
- [Nx](https://www.npmjs.com/package/nx)

---
_Source: https://npm.io/package/ngx-conditional-child-routes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._