ngxRocket and Route Reusable Strategy

A few weeks ago, I had the need to use “ngx-rocket” generator, which I thought was really good, but I was surprised when I discover that by only adding `data: {reuse: true}` to the route params (as highlighted in the documentation) didn’t worked. My objective here is to present an alternative solution for you to understand how to fix this problem.

Using in my example code

src/app/app-routing.module.ts

Since reusing some routes was of vital importance to me, I set myself the task of implementing a solution.

That’s the result:

src/app/core/route-reusable-strategy.ts

Now I can reuse the routes by adding “data: {reuse: true}” in the route definition.

src/app/app-routing.module.ts

If you comment my code and uncomment the ngx-rocket, and try to navigate from House1 to any of the other houses (house2, house3, house4 or house5), even though the id in the browser’s url changes, you will notice that the data of the house does not change and this is given because the route is not being reused.

Here is the repository with the sample code:

alienpr84/ngx-RocketRouteReuseStrategy

console.log(“enjoy it”);