It’s fair to say, that Angular Routing is quite a complex topic. It has tons of configurations and sometimes it’s better to try something and see how it works in a browser than crumble inside the documentation.

But the most annoying part of this module is the caching technique for routing components. There are lots of cases when you want to cache some components upon the route change and reuse it later after the same navigation. In contrast, There are also lots of cases when you want to renew a component every time the route changes. The only documentation I found in the Angular docs is simply none. There is just a hint about that inside the API doc.

Personally I’ve had many occasions when I needed that functionality, so I acquired some knowledge and I want to share it with you, and maybe it will cut the learning path for you in the future.

Caching Components

Caching components on route change is already baked inside Angular. All you need to do is find out how to do that. This is how it works:

Whenever there is a route change inside the Angular application, Angular finds the appropriate component and loads it inside router-outlet , but before doing that, there is an abstract class called RouteReusedStrategy , and Angular askes it, “Hey I’m going to change the route, do you want to cache this route and reuse it later?”. That’s the place we have to intercept to fit our needs. But let’s first examine how this class works by default.

DefaultReuseStrategy

By default, Angular only reuses the same route if it’s the routeParamchange, meaning that the path is the same but param arguments are changed, like /user/john -> /user/doe , otherwise, it will create a new component every time. The implementation of this condition resides in the[DefaultRouteReuseStrate](https://github.com/angular/angular/blob/master/packages/router/src/route_reuse_strategy.ts) class, and this is how it looks like:

I agree the method names don’t explain to us a lot, but it will be cleared shortly. Let’s examine one by one.

shouldReuseRoute

I think the code itself describes what this method does. Whenever there is a route change, it checks if the current and the future routeConfigs are the same and if it’s so, then it reuses the same component. That’s why we have the same component whenever there is a routeParam change because it’s the same route we are trying to load. If we return always False there we would disable the reusing components at all.

shouldDetach

Whenever the current route is leaving, this method is called, so Angular checks this route should be stored or just completely removed. If it returns True then it will call the store method otherwise it will just destroy it. As we see by default it is False , so no component is cached.

store

If shouldDetach returns True , then this method is called and it’s up to you, how you want to store that route, you can just simply add it to the plain object, by path

routes[route.routeConfig.path] = route;

#programming #javascript #angular-router #angular