Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork2
Strictly typed lightweight alternatives to NgRx Router Store and ActivatedRoute.
License
ngworker/router-component-store
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A monorepo containing Angular router state management packages that provide strictly typed, lightweight alternatives to NgRx Router Store (@ngrx/router-store) andActivatedRoute.
This repository contains two main packages:
A Component Store-based solution using observables:
- Package:
@ngworker/router-component-store - Technology: NgRx Component Store (
@ngrx/component-store) with RxJS observables - Use Case: When you prefer observable-based reactivity patterns
// Observable-based APIexportclassHeroService{ #routerStore=inject(RouterStore);url$=this.#routerStore.url$;// Observable<string>searchTerm$=this.#routerStore.selectQueryParam('q');// Observable<string | undefined>}
A Signal Store-based solution using Angular Signals:
- Package:
@ngworker/router-signal-store - Technology: NgRx Signals (
@ngrx/signals) with Angular Signals - Use Case: When you prefer signal-based reactivity patterns
// Signal-based APIexportclassHeroService{ #routerSignalStore=inject(RouterSignalStore);url=this.#routerSignalStore.url;// Signal<string>searchTerm=this.#routerSignalStore.selectQueryParam('q');// Signal<string | undefined>}
Both packages provide:
✅Strictly Typed: Full TypeScript support with strict typing
✅Lightweight: Minimal bundle size impact
✅Drop-in Replacement: For NgRx Router Store andActivatedRoute
✅Global & Local Stores: Application-wide and component-level usage
✅Immutable State: Router state is immutable and serializable
✅Memory Safe: Proper subscription management and cleanup
Both packages follow Angular's recommended release pattern for Angular libraries. One major package version for every major Angular release.
Features released in minor versions of Angular and NgRx packages are not used until the following major version package release to ensure compatibility across minor versions.
The packages require the same peer dependencies as their corresponding Angular and NgRx packages.
npm install @ngworker/router-component-store
import{provideGlobalRouterStore}from'@ngworker/router-component-store';bootstrapApplication(AppComponent,{providers:[provideGlobalRouterStore()],});
npm install @ngworker/router-signal-store
import{provideGlobalRouterSignalStore}from'@ngworker/router-signal-store';bootstrapApplication(AppComponent,{providers:[provideGlobalRouterSignalStore()],});
| Feature | Router Component Store | Router Signal Store |
|---|---|---|
| Current Route | currentRoute$: Observable<...> | currentRoute: Signal<...> |
| Query Parameters | queryParams$: Observable<...> | queryParams: Signal<...> |
| Route Parameters | routeParams$: Observable<...> | routeParams: Signal<...> |
| Route Data | routeData$: Observable<...> | routeData: Signal<...> |
| URL | url$: Observable<string> | url: Signal<string> |
| Fragment | fragment$: Observable<...> | fragment: Signal<...> |
| Title | title$: Observable<...> | title: Signal<...> |
| Router events | selectRouterEvents(...): Observable<...> | Not included to avoid an RxJS dependency |
Both packages support global router stores for application-wide router state access:
// Component Store@Injectable({providedIn:'root'})exportclassNavigationService{ #routerStore=inject(RouterStore);currentPath$=this.#routerStore.url$;}// Signal Store@Injectable({providedIn:'root'})exportclassNavigationService{ #routerSignalStore=inject(RouterSignalStore);currentPath=this.#routerSignalStore.url;}
Both packages support local router stores for component-specific router state:
// Component Store@Component({providers:[provideLocalRouterStore()],})exportclassProductComponent{ #routerStore=inject(RouterStore);productId$=this.#routerStore.selectRouteParam('id');}// Signal Store@Component({providers:[provideLocalRouterSignalStore()],})exportclassProductComponent{ #routerStore=inject(RouterSignalStore);productId=this.#routerStore.selectRouteParam('id');}
This repository uses:
- Nx for monorepo, task, and CI management
- Angular,RxJS, andNgRx
- TypeScript
- Jest for testing
- Prettier andESLint for code quality
# Install dependenciesyarn install# Run testsyarntest# Run lintingyarn lint# Build packagesyarn build# Perform dead code analysisyarn knip# Run all CI checksyarn ci# Check formattingyarn format:check# Format codeyarn format
Contributions are welcome! Submit pull requests to the main branch.
MIT ©ngworkers
About
Strictly typed lightweight alternatives to NgRx Router Store and ActivatedRoute.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Contributors6
Uh oh!
There was an error while loading.Please reload this page.