angular - Is it possible to call parent resolver each time the page is being reloaded?

Question

In resolver:

• Fetch data
• build router depending of those data

Afterwards, my router looks this:

{
  path: '',
  component: WrapperComponent,
  resolve: {
    traveler: TravelerResolver, // <-- the resolver adds children
  },
  children: [{
    path: 'a',
    component: AComponent,
    children: [{
      path: 'sub-a',
      component: SubAComponent,
    }, {
      path: 'sub-b',
      component: SubBComponent,
    }],
  }, {
    path: 'b',
    component: AComponent,
    children: [{
      path: 'sub-a-prime',
      component: SubAprimeComponent,
    }, {
      path: 'sub-b-prime',
      component: SubBprimeComponent,
    }],
  }],
}

So I am able to navigate to /a/sub-a for example. What's happening is at reloading, the resolver is not called again in order to generate routes.

Is it possible to call it again or is there a better pattern for my case?

EDIT.

I've made a stackblitz:

https://stackblitz.com/edit/angular-ivy-4yen6w?

Answer 1

It is possible by setting the runGuardsAndResolvers property on your root route. Here is a pretty quick explanation about how it works.

I've created a StackBlitz for you that shows you it in action. The main part of the code is below:

const routes: Route[] = [
  {
    path: "",
    component: HelloComponent,
    resolve: {
      traveler: TravelerResolver // <-- the resolver adds children
    },
    // by specifying 'always', guards and resolvers will run any time the url changes
    runGuardsAndResolvers: 'always', 
    children: [
      {
        path: "resolverTest",
        component: HelloComponent
      }
    ]
  }
];