Search code examples
angularangular-router

Angular Route Reuse Strategy


I am using this example as a starting point.

My configuration is something like this:

editor.module:

....
import { editorRoutingModule } from './editor-routing.module';
import { RouteReuseStrategy } from '@angular/router';
import { myRouteReuseStrategy } from './my-route-reuse-strategy';

....
providers: [
    {
        provide: RouteReuseStrategy,
        useClass: AWARouteReuseStrategy
    },
    service1, service2, ....  ],

editor-routing.module:

const routes: Routes = [
{
    path: '',
    component: editorComponent,
    resolve: { model: "resolver" },
    data: { resolvedata: 'Home' },
    children: [
        {
            path: 'asset/',
            component: assetComponent,
            resolve: { model: "resolver" },
            data: { resolvedata: 'Assets' },
        },
        {
            path: 'tags/:tags',
            component: tagsComponent,
            resolve: { model: "resolver" },
            data: { resolvedata: 'Tags' },
        },
         ....
    ],
},
{ path: '**', redirectTo: 'asset/' },
];

@NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
   providers: [],
})

editor main component:

<editor-navigation-tree></editor-navigation-tree>
<router-outlet></router-outlet>

myRouteReuseStrategy is exactly the same as in the provided sample project.

Navigation is done by the tree when a node is selected. There is quite a lot of code, so I'm not sure what else to show.

When I run it, it's not going into the route reuse strategy code at all.


Solution

  • I faced this issue before, the RouterReuseStrategy must be placed on the root module (app.module.ts) only then it will work, you can narrow down its effect by check the URL matches the module/component so that it only affects these areas.

    App.module.ts

    ....
    import { editorRoutingModule } from './editor-routing.module';
    import { RouteReuseStrategy } from '@angular/router';
    import { myRouteReuseStrategy } from './my-route-reuse-strategy';
    ....
    providers: [
        {
            provide: RouteReuseStrategy,
            useClass: AWARouteReuseStrategy
        },
        service1, service2, ....  ],