How to refresh a route's resolved data

Question

Consider the following route configuration:

const routes: Routes = [
  {
    path: '',
    component: AppComponent,
    resolve: {
      app: AppResolver
    },
    children: [
      {
        path: 'user/:uid',
        resolve: {
          user: UserResolver
        },
        children: [
          {
            path: '',
            component: ViewUserComponent
          },
          {
            path: 'edit',
            component: EditUserComponent
          }
        ]
      }
    ]
  }
];

The user data are retrieved by UserResolver for any children of route /user/:uid. Using this data, a user profile can be viewed by navigating to /user/:uid and then edited by navigating to /user/:uid/edit. Upon a successful edit, one would expect to be redirected to the user's updated profile (/user/:uid).

However, both the view and edit page being children of the resolved route, the resolver is not triggered when navigating from one to the other.

Consequently, when navigating back from the edit component to the view component, the data displayed is still the old, non-updated one.

Would there be any way to invalidate the resolved user data to force the resolver to fetch it again from the server? Or is there any other way to achieve that kind of result?

The app data being unchanged, we shouldn't have to reload it.

Answer 1

I've tested the solution 'runGuardsAndResolvers', it works for my use case, the resolver is called at each sub-page changes.

It is only adding this option the part of your routes that you want behave this way.

export const ROUTES: any = [
  {
    path: 'project/:name',
    runGuardsAndResolvers: "always",
    component: ProjectComponent,
    resolve: { project: ProjectResolver },
    children: [
      ...