I am encountering an issue that I am not quite sure why or how to fix. I have a signal store and I am using the onDestroy hook in order to ensure that we clear out any state data from the store. The issue is that when I navigate away from the route that provides the store, the onDestroy is never called.

The hook is fairly simple and is defined as such:

onDestroy(store) {
            console.log("destroy")
            patchState(store,initialState);
        }

the way in which I am providing the store, and its underlying service is via the providers array in the routing.

        providers: [CoursesStore, CoursesService],

I made sure that both are injectable; however, they are not set as injected in root as I did not want a singleton for them. The courses store only injects courses service inside of itself for its API actions, so I do not think it is an issue where it may be retaining a reference to something.

A few things of note:

• I have two routing files with routes defined: One for before the user is authenticated, and then this one which is referenced in the first file and is used for all authenticated routes

ex:

{
    path: '',
    loadComponent: () =>
      import('./components/app-authenticated/app-authenticatedponent').then(
        (m) => m.AppAuthenticatedComponent
      ),
    loadChildren: () =>
      import('./components/app-authenticated/app-authenticated.routes').then(
        (m) => m.appAuthenticatedRoutes
      ),
    title: 'Home',
    data: {
      breadcrumb: 'Home',
    },
    canActivate: [authenticatedGuard, navigatedRoutesGuard],
  }

• If I were to move the provider to the component level, then onDestroy is fired. This makes sense as it honors the life cycle of a component, but I want this store available at the overall route level and then discarded once we nav away
• I can certainly get around this by just manually calling a dispose function on the store, but that would defeat the entire purpose of using hooks.

Am I missing something fundamental about how the hooks are supposed to work? Is it only tied to the component's life cycle and using it at a route level is incorrect?

I am encountering an issue that I am not quite sure why or how to fix. I have a signal store and I am using the onDestroy hook in order to ensure that we clear out any state data from the store. The issue is that when I navigate away from the route that provides the store, the onDestroy is never called.

The hook is fairly simple and is defined as such:

onDestroy(store) {
            console.log("destroy")
            patchState(store,initialState);
        }

the way in which I am providing the store, and its underlying service is via the providers array in the routing.

        providers: [CoursesStore, CoursesService],

I made sure that both are injectable; however, they are not set as injected in root as I did not want a singleton for them. The courses store only injects courses service inside of itself for its API actions, so I do not think it is an issue where it may be retaining a reference to something.

A few things of note:

• I have two routing files with routes defined: One for before the user is authenticated, and then this one which is referenced in the first file and is used for all authenticated routes

ex:

{
    path: '',
    loadComponent: () =>
      import('./components/app-authenticated/app-authenticatedponent').then(
        (m) => m.AppAuthenticatedComponent
      ),
    loadChildren: () =>
      import('./components/app-authenticated/app-authenticated.routes').then(
        (m) => m.appAuthenticatedRoutes
      ),
    title: 'Home',
    data: {
      breadcrumb: 'Home',
    },
    canActivate: [authenticatedGuard, navigatedRoutesGuard],
  }

• If I were to move the provider to the component level, then onDestroy is fired. This makes sense as it honors the life cycle of a component, but I want this store available at the overall route level and then discarded once we nav away
• I can certainly get around this by just manually calling a dispose function on the store, but that would defeat the entire purpose of using hooks.

Am I missing something fundamental about how the hooks are supposed to work? Is it only tied to the component's life cycle and using it at a route level is incorrect?

• angular
• ngrx
• ngrx-signal-store

• route providers are never destroyed – Gérôme Grignon Commented Mar 6 at 13:38
• @GérômeGrignon, I see, I was starting to suspect that. Is there a specific link to docs that show that? That seems like a very odd decision given if a route is no longer present then it naturally would lend itself to destruction – SomeStudent Commented Mar 6 at 13:40

1 Answer 1

It does appear as though items provided in the providers of a route are not disposed of, to attain the desired behavior, I merely created a dummy wrapper component whose internals are purely just

<router-outlet></router-outlet>

From there, the component handles setting what it provides and all the children components have access to the desired store/service given they're loaded under that parent wrapper. Not an ideal solution, but certainly better than having to manually call dispose