Effects: Introduce Standalone API for NgRx Effects

[markostanimirovic]

Information

provideEffects function should have the same behavior as EffectsModule.forRoot and EffectsModule.forFeature methods, but it should provide a "module-free" developer experience. This function should have the same signature as EffectsModule methods - it should accept an array of effect source classes.

Related discussion: #3399

Describe any alternatives/workarounds you're currently using

To provide effects with standalone Angular features, we can use importProvidersFrom function:

// main.ts
bootstrapApplication(AppComponent, {
  providers: [importProvidersFrom(EffectsModule.forFeature([RouterEffects]))]
});

// feature.routes.ts:
export const featureRoutes: Route[] = [
  {
    path: '',
    component: FeatureComponent,
    providers: [importProvidersFrom(EffectsModule.forFeature([FeatureApiEffects]))],
  },
];

The provideEffects function should replace both EffectsModule methods, so it can be used in the following way:

// main.ts
bootstrapApplication(AppComponent, {
  providers: [provideEffects([RouterEffects])]
});

// feature.routes.ts:
export const featureRoutes: Route[] = [
  {
    path: '',
    component: FeatureComponent,
    providers: [provideEffects([FeatureApiEffects])],
  },
];

Unlike EffectsModule.forRoot, it won't be required to call provideEffects at the root level, if there are no root effects.

I would be willing to submit a PR to fix this issue

• Yes
• No

[brandonroberts]

I don't know if there is an existing type we can use, but if possible we should have types in place that prevent these provider functions to be added to Component providers where they won't register correctly.

[markostanimirovic]

@brandonroberts

Good idea! The importProvidersFrom function uses ImportedNgModuleProviders as return type to show a compilation error if its result is passed to the providers array of NgModule, Component, or Directive.

The name ImportedNgModuleProviders is not appropriate in our case. I left the comment here to check with Angular team about renaming ImportedNgModuleProviders type to EnvironmentProviders and use it as a return type of all provide... functions that cannot be used at the component/directive level.

[brandonroberts]

I like that idea