Angular standalone components library and NGRX slices

Question

I'm migrating an application to standalone components using the following:

ng generate @angular/core:standalone

I've already migrated every component to standalone. I now need to remove unnecesary NgModules, which is the second step in the migration guide. Our application uses several different Angular libraries of our own which expose components in the following manner:

const IMPORTS = [ SearcherComponent, SearcherHotelsComponent, SearcherStoreModule, ]; @NgModule({ imports: [...IMPORTS], exports: [...IMPORTS], providers: [provideHttpClient()], }) export class LibSearcherModule {}

The fact that we include SearcherStoreModule in LibSearcherModule ties together the ngrx store slice and the searcher components exposed by the library. This means that, if a developer wants to use the searcher, he will be also including the needed store slice automatically.

I need a solution to achieve the same relationship via standalone components. I've come up with importing the following in each exposed component, but it seems cumbersome:

StoreModule.forFeature('SearcherSlice', reducers), EffectsModule.forFeature([SearcherEffects]),

Daniel Macak · Accepted Answer · 2025-08-03 10:02:22Z

You are close, but it can be even more practical.

Since you go direction standalone, I'd also use ngrx's standalone APIs:

providers: [ provideState({ name: searcherStateKey, reducer: reducers }), provideEffects(SearcherEffects), ],

Or, if you used Feature Creators, even simpler:

provideState(searcherFeature)

Not sure what you mean with "importing the following in each exposed component", but you'd only register these providers with the SearcherComponent once and they'd get used wherever you'd import and use the component.

Thank you for your answer. What I basically meant was whether to register these providers for each component exposed by the searcher library, or just provide it once in the consuming app via bootstrapApplication.
Well that depends. If these should be lazy loaded, then register them with the components. If many lib components use them, maybe you could even justify distributing them via an ng module. If however you want to use that slice from the get go and it's relevant to the app from the start, register them with the app. Does that make sense?

Collectives™ on Stack Overflow

Angular standalone components library and NGRX slices

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related