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-authenticated.component').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? Continue reading...
