Implementing Route Reuse Strategy in Angular

Apr 2, 2025

—

Angular applications often involve complex navigation structures, with routes that would benefit from caching and reusing components rather than re-creating them every time they are visited. The Route Reuse Strategy mechanism in Angular helps you to achieve this by allowing you to define rules for reusing routes. In this article, we will explore how to implement a custom route reuse strategy, using a simple static route and a parameterized route as examples.

Understanding Route Reuse Strategy

The RouteReuseStrategy is a powerful Angular interface that gives developers control over when to store and retrieve routes. By default, Angular does not reuse routes but destroys them on exit and recreates them upon returning. Implementing a custom strategy can improve performance, especially for routes that involve heavy computation or resource loading.

Implementing a Simple Route Reuse Strategy

To begin creating a custom route reuse strategy, you need to extend the RouteReuseStrategy class. For our examples, we will implement a straightforward strategy that caches and retrieves a simple static route.

Create a new Service for Route Reuse Strategy:

import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';

export class CustomReuseStrategy implements RouteReuseStrategy {
    private handlers: { [key: string]: DetachedRouteHandle } = {};

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        return true;  // cache all routes
    }

    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        this.handlers[route.routeConfig.path] = handle;
    }

    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        return !!this.handlers[route.routeConfig.path];
    }

    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        return this.handlers[route.routeConfig.path];
    }

    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        return future.routeConfig === curr.routeConfig;
    }
}

Register the Custom Strategy in Your App Module:

First, add the strategy to the providers in your AppModule as follows:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { CustomReuseStrategy } from './custom-reuse-strategy';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, RouterModule.forRoot([])],
  providers: [{ provide: RouteReuseStrategy, useClass: CustomReuseStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

Implementing Route Reuse with Parameters

Handling routes with parameters adds an extra level of complexity to route reuse. The route should only be reused when certain parameters are the same.

Modify the CustomReuseStrategy to include checking for parameters:

shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
   return future.routeConfig === curr.routeConfig &&
          JSON.stringify(future.params) === JSON.stringify(curr.params);
}

This configuration will ensure routes are reused only when the route path and parameters are identical.

Conclusion

The Route Reuse Strategy in Angular can significantly enhance the performance of your application by caching and reusing routes. This tutorial has shown you how to implement a basic reuse strategy and adapt it for use with parameterized routes. By understanding and leveraging this strategy, you can ensure a seamless and efficient navigation experience for your users.

Comments

2 responses to “Implementing Route Reuse Strategy in Angular”

John

April 2, 2025

Great article, Mike. Can you handling a route with parameters a bit more and provide a more complete strategy implementation for parameterized routes?

Reply
1. Mike
  
  April 2, 2025
  Thanks, John! I’m glad you found the article helpful. Handling parameterized routes can indeed be a bit tricky. To provide a more complete strategy, you might want to consider scenarios where only certain parameters are relevant for reuse, or where parameters need to be deeply compared.
  
  Here’s a more robust approach:
  1. Selective Parameter Comparison: Customize the shouldReuseRoute method to compare only specific parameters that are crucial for determining route reuse.
  2. Deep Comparison: If your parameters are objects, consider using a deep comparison utility to ensure accurate checks.
  Here’s how you might implement these:
```
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    const paramsToCheck = ['id', 'category']; // Specify parameters relevant for reuse

    const futureParams = paramsToCheck.map(param => future.params[param]).join(',');
    const currParams = paramsToCheck.map(param => curr.params[param]).join(',');

    return future.routeConfig === curr.routeConfig && futureParams === currParams;
}
```
  This approach gives you flexibility and precision in determining when to reuse a route. Let me know if you need further details or examples!
  Reply