I have this code:
export const PROJECT_ROUTES: Routes = [
{
path: '',
component: FeatureShellComponent,
providers: [
provideEffects([
MyStore1Effects,
MyStore2Effects,
MyStore3Effects,
MyStore4Effects,
]),
],
children: [
{
path: '',
pathMatch: 'full',
loadComponent: () =>
import(
'./project-list-page/project-list/project-list.component'
).then((m) => m.ProjectListComponent),
},
{
path: `:${RouteParams.ProjectId}`,
pathMatch: 'full',
loadComponent: () =>
import('./project-detail-page/project-detail.component').then(
(m) => m.ProjectDetailComponent
),
}
],
},
];
In the app.module providers:
...
provideEffects([]),
provideStore(
{},
{
metaReducers: [],
runtimeChecks: {
strictActionImmutability: true,
strictStateImmutability: true,
strictStateSerializability: true,
strictActionSerializability: true,
strictActionWithinNgZone: true,
},
}
),
provideStoreDevtools({
maxAge: 25, // Retains last 25 states
autoPause: true, // Pauses recording actions and state changes when the extension window is not open,
name: 'my-Project',
connectInZone: true,
}),
...
I expected the storeEffects from the parent route to be provided to every single child route, but it doesn’t. Only the ProjectListComponent gets all the effects and renders ok, but ProjectDetailComponent doesn’t render because all the effects doesn’t trigger and I don’t get data.
(This route code is pretty much the same configuration I have in other sub-project inside where this works as intended)
I know that this can be fixed if I add the provideEffects as provider of every child route itself, but this would imply to have multiple instances of the same Effects, which we don’t want to do.
metal-draken is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.