{"id":18805844,"url":"https://github.com/m-thompson-code/ngx-feature-flag-router","last_synced_at":"2026-02-25T21:05:45.341Z","repository":{"id":37258772,"uuid":"472165431","full_name":"m-thompson-code/ngx-feature-flag-router","owner":"m-thompson-code","description":"Extends RouteModule functionality to allow for conditionally lazy-loading child routes based on feature flag.Allows for Services to configure Routes and includes helpers for preload strategy.","archived":false,"fork":false,"pushed_at":"2022-10-12T20:10:57.000Z","size":1937,"stargazers_count":11,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-08T00:40:47.760Z","etag":null,"topics":["angular","lazy-loading","loadchildren","monorepo","nx-workspace","router","typescript"],"latest_commit_sha":null,"homepage":"https://m-thompson-code.github.io/ngx-feature-flag-router/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/m-thompson-code.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-21T02:49:53.000Z","updated_at":"2023-11-05T10:46:53.000Z","dependencies_parsed_at":"2023-01-19T11:18:27.219Z","dependency_job_id":null,"html_url":"https://github.com/m-thompson-code/ngx-feature-flag-router","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/m-thompson-code/ngx-feature-flag-router","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thompson-code%2Fngx-feature-flag-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thompson-code%2Fngx-feature-flag-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thompson-code%2Fngx-feature-flag-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thompson-code%2Fngx-feature-flag-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/m-thompson-code","download_url":"https://codeload.github.com/m-thompson-code/ngx-feature-flag-router/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thompson-code%2Fngx-feature-flag-router/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29839982,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-25T20:42:33.054Z","status":"ssl_error","status_checked_at":"2026-02-25T20:42:21.322Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","lazy-loading","loadchildren","monorepo","nx-workspace","router","typescript"],"created_at":"2024-11-07T22:45:15.731Z","updated_at":"2026-02-25T21:05:45.325Z","avatar_url":"https://github.com/m-thompson-code.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NgxFeatureFlagRouter\n\n![GitHub package.json version](https://img.shields.io/github/package-json/v/m-thompson-code/ngx-feature-flag-router)\n![GitHub](https://img.shields.io/github/license/m-thompson-code/ngx-feature-flag-router)\n![npm](https://img.shields.io/npm/dt/ngx-feature-flag-router)\n![npm](https://img.shields.io/npm/dw/ngx-feature-flag-router)\n![Website](https://img.shields.io/website?down_color=red\u0026down_message=offline\u0026label=demo\u0026up_color=green\u0026up_message=online\u0026url=https%3A%2F%2Fm-thompson-code.github.io%2Fngx-feature-flag-router%2F)\n![Custom badge](https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fm-thompson-code%2Fngx-feature-flag-router%2Fmain%2Fjest-badge%2Fcoverage.json)\n\n[Demo](https://m-thompson-code.github.io/ngx-feature-flag-router/)\n\nExtends RouteModule functionality to allow for conditionally lazy-loading child routes based on feature flag. Allows for Services to configure Routes and includes helpers for preload strategy.\n\nThis allows you to use an endpoint to lazy-load modules, easily redirect users to 403/404 pages, performant A/B testing for features.\n\n## Angular Major Version Support\n\n| Angular Version | Support                                         |\n| --------------- | ----------------------------------------------- |\n| 9               | ✅ Yes                                          |\n| 10              | ✅ Yes                                          |\n| 11              | ✅ Yes                                          |\n| 12              | ✅ Yes                                          |\n| 13              | ✅ Yes                                          |\n| 14              | Mostly. Support for `loadComponent` [coming soon](https://github.com/m-thompson-code/ngx-feature-flag-router/tree/standalone-components) |\n\n## Installation\n\nAdd:\n\n```bash\nng add ngx-feature-flag-router\n```\n\nUpdate:\n\n```bash\nng update ngx-feature-flag-router #Updates ngx-feature-flag-router to latest version\n```\n\nIf you're not using the latest version of Angular, you'll have to specify the major version:\n\n```bash\nng update ngx-feature-flag-router@10 #Specific to Angular 10\n```\n\n## How to Use\n\n1. Replace `RouterModule.forChild()` with `FeatureFlagRouterModule.forChild()`\n\nBefore:\n\n```typescript\nimport { RouterModule, Routes } from '@angular/router';\n\nconst routes: Routes = [\n    /*...*/\n];\n\n@NgModule({\n    imports: [RouterModule.forChild(routes)],\n})\nexport class MyModule {}\n```\n\nAfter:\n\n```typescript\nimport { FeatureFlagRouterModule, FeatureFlagRoutes } from 'ngx-feature-flag-router';\n\nconst routes: FeatureFlagRoutes = [\n    /*...*/\n];\n\n@NgModule({\n    imports: [FeatureFlagRouterModule.forChild(routes)],\n})\nexport class MyModule {}\n```\n\n2. Add `alternativeLoadChildren` and `featureFlag` to conditional lazy-load alternative module when `featureFlag` returns `true`\n\nBefore:\n\n```typescript\nconst routes: Routes = [\n    {\n        path: 'hello-world',\n        loadChildren: () =\u003e import('./hello-world.module').then((m) =\u003e m.HelloWorldModule),\n    },\n];\n```\n\nAfter:\n\n```typescript\nconst routes: FeatureFlagRoutes = [\n    {\n        path: 'hello-world',\n        loadChildren: () =\u003e import('./hello-world.module').then((m) =\u003e m.HelloWorldModule),\n        alternativeLoadChildren: () =\u003e import('./feature.module').then((m) =\u003e m.FeatureModule),\n        featureFlag: () =\u003e showFeature(), // Function that returns boolean\n    },\n];\n```\n\n## How to Use Services / API\n\n1. Add your Service ( `MyService` ) as the second argument of `FeatureFlagRouterModule.forChild()`\n\n```typescript\nimport { FeatureFlagRouterModule, FeatureFlagRoutes } from 'ngx-feature-flag-router';\n\n// Initialize routes that don't require Service\nconst routes: FeatureFlagRoutes = [\n    /*...*/\n];\n\n@NgModule({\n    imports: [FeatureFlagRouterModule.forChild(routes, MyService)],\n})\nexport class MyModule {}\n```\n\n2. Add implements `FeatureFlagRoutesService` to your Service.\n\n```typescript\n@Injectable({ providedIn: 'root' })\nexport class FeatureFlagService implements FeatureFlagRoutesService {\n    // ...\n}\n```\n\n3. Add `getFeatureRoutes()` method and return your `FeatureFlagRoutes`\n\n```typescript\n@Injectable({ providedIn: 'root' })\nexport class FeatureFlagService implements FeatureFlagRoutesService {\n    // Get current user id\n    private readonly userId$: Observable\u003cnumber\u003e = this.getUserId();\n\n    constructor(private readonly httpClient: HttpClient) {}\n\n    /** Set additional routes using Service */\n    getFeatureRoutes(): FeatureFlagRoutes {\n        return [\n            {\n                path: 'api-example',\n                loadChildren: () =\u003e import('api-feature-flag-off.module').then((m) =\u003e m.ApiFeatureFlagOffModule),\n                alternativeLoadChildren: () =\u003e import('api-feature-flag-on.module').then((m) =\u003e m.ApiFeatureFlagOnModule),\n                featureFlag: () =\u003e this.showFeature(), // Function that returns Observable\u003cboolean\u003e\n            },\n        ];\n    }\n\n    /** Determine showing feature based on user id and API response */\n    showFeature(): Observable\u003cboolean\u003e {\n        // Use current user id\n        return this.userId$.pipe(\n            switchMap((userId) =\u003e {\n                // Make specific request for that user\n                return this.httpClient.get\u003cUserStatus\u003e('some/api');\n            }),\n            map((userStatus) =\u003e {\n                // Check if we want to turn feature flag on or not\n                return userStatus.authorized;\n            }),\n            // Replay results until user id changes if you only want to make the api request once\n            shareReplay({ bufferSize: 1, refCount: true }),\n        );\n    }\n}\n```\n\n## Mono Repo\n\nDemo and library is managed using [Nx](https://nx.dev).\n\n## Contributing\n\nBefore adding any new feature or a fix, make sure to open an issue first :)\n\n1. Make sure to use the expected node/npm versions\n\n```bash\nnode -v # v14.17.1\n```\n\n```bash\nnpm -v # 6.14.13\n```\n\nIf you have the wrong versions, I suggest using [nvm](https://github.com/nvm-sh/nvm#installing-and-updating) or [volta](https://docs.volta.sh/guide/getting-started) for node version management.\n\n2. Clone the project and install dependencies\n\n```\ngit clone https://github.com/m-thompson-code/ngx-feature-flag-router.git\nnpm install\n```\n\n3. Create a new branch\n\n```bash\ngit checkout -b feature/some-feature\n```\n\n4. Add tests and make sure demo and library jest / cypress tests pass\n\n```bash\nnpm run test # both demo and ngx-feature-flag-router lib\n```\n\nor\n\n```bash\nnpm run test:demo # only demo\nnpm run test:lib # only ngx-feature-flag-router lib\n```\n\nYou can also run jest tests separately\n\n```bash\nnpm run jest:demo # only demo jest tests\nnpm run jest:lib # only ngx-feature-flag-router lib jest tests\n```\n\nand cypress tests separately\n\n```bash\nnpm run e2e:demo # only demo cypress tests\nnpm run e2e:lib # only ngx-feature-flag-router lib cypress tests\n```\n\n5. commit \u003e push \u003e create a pull request 🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm-thompson-code%2Fngx-feature-flag-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fm-thompson-code%2Fngx-feature-flag-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm-thompson-code%2Fngx-feature-flag-router/lists"}