Skip to content

Conversation

Copilot
Copy link
Contributor

@Copilot Copilot AI commented Sep 25, 2025

This PR adds support for custom router state serializers to both provideGlobalRouterStore and provideLocalRouterStore, bringing feature parity with @ngrx/router-store.

Problem

As noted in the comparison documentation, Router Component Store previously used a serializer similar to MinimalRouterStateSerializer but did not support custom router state serializers, unlike NgRx Router Store which supports this through a serializer setting.

Solution

This implementation adds:

Core API

  • Generic RouterStateSerializer<T> interface - Allows custom serializers with type safety
  • ROUTER_STATE_SERIALIZER injection token - Enables dependency injection of custom serializers
  • RouterStoreConfig<T> interface - Configuration object for provider functions

Provider Updates

Both provider functions now accept an optional configuration parameter:

// Global router store with custom serializer
providers: [
  provideGlobalRouterStore({ serializer: CustomRouterStateSerializer })
]

// Local router store with custom serializer  
@Component({
  providers: [provideLocalRouterStore({ serializer: CustomRouterStateSerializer })]
})
export class MyComponent { }

Example Custom Serializer

@Injectable()
export class CustomRouterStateSerializer implements RouterStateSerializer<MinimalRouterStateSnapshot> {
  serialize(routerState: RouterStateSnapshot): MinimalRouterStateSnapshot {
    return {
      root: this.serializeRoute(routerState.root),
      url: '/custom' + routerState.url, // Custom URL transformation
    };
  }

  private serializeRoute(route: ActivatedRouteSnapshot): MinimalActivatedRouteSnapshot {
    // Custom serialization logic
  }
}

Backward Compatibility

Zero breaking changes - All existing code continues to work unchanged. When no custom serializer is provided, the default MinimalRouterStateSerializer is used automatically.

Use Cases

This feature enables:

  • URL Transformation: Modify URLs before storage (e.g., adding prefixes, normalization)
  • Data Enrichment: Add timestamps, user context, or metadata to router state
  • Filtering: Remove sensitive information from router state
  • Custom State Structures: Create specialized state formats for specific needs

Testing

  • Added comprehensive test suite with 7 new test cases covering all scenarios
  • All existing tests continue to pass (264 total tests)
  • Includes tests for both global and local router stores with custom serializers
  • Verifies default behavior when no custom serializer is provided

Documentation

  • Updated README with detailed examples and usage patterns
  • Updated comparison documentation to reflect new feature parity with NgRx Router Store
  • Added important notes about type safety and compatibility requirements

This brings Router Component Store to full feature parity with @ngrx/router-store regarding custom serialization while maintaining the lightweight, type-safe approach that makes it an excellent alternative to both NgRx Router Store and ActivatedRoute.

Original prompt

This section details on the original issue you should resolve

<issue_title>Add support for custom serializer and custom router state type</issue_title>
<issue_description>The current ngrx router-store supports provofing a custom state serializer and working with a custom state type. router-component-store should support this too.</issue_description>

Comments on the Issue (you are @copilot in this section)

@LayZeeDK Thank you for your feature request. What's a use case for this? @LayZeeDK I'm not very familiar with `@ngrx/router-store` but from what I can read, a router state serializer is used to extract more slices of state from `RouterStateSnapshot`, correct? @LayZeeDK I'm not sure how adding this is better than subscribing to the `RouterState` through the `Router` and mapping using observable operators. That seems to be a lot easier than implementing a router serializer.

In NgRx RouterStore this functionality was added to support Redux Dev Tools. Currently, NgRx ComponentStore doesn't have native support for Redux Dev Tools.</comment_new>
<comment_new>@LayZeeDK
Even if we were to add it, I worry it would increase the bundle size significantly even for the xx% of applications never using this feature.</comment_new>

Fixes #260

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

@Copilot Copilot AI changed the title [WIP] Add support for custom serializer and custom router state type feat: add support for custom router state serializer Sep 25, 2025
Copilot finished work on behalf of LayZeeDK September 25, 2025 20:48
@Copilot Copilot AI requested a review from LayZeeDK September 25, 2025 20:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add support for custom serializer and custom router state type

2 participants