[SOLVED] Angular standalone components library and NGRX slices

Angular standalone components library and NGRX slices

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]),

Solution

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.