NgRX EffectsModule makes my environment http config undefined

Question

Importing EffectModule into AppModule makes my environment configuration to load http services undefined. I'm using angular 11.2 and @ngrx/effects 12.3.

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { CoreModule } from './core/core.module';
import { CommonModule } from '@angular/common';
import { StoreModule } from '@ngrx/store';
import { reducers, metaReducers } from './store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { ConfigService } from './core/services/config.service';
import { environment } from 'src/environments/environment';
import { EffectsModule } from '@ngrx/effects';
import { SomeEffects } from './store/some.effects';

@NgModule({
  declarations: [AppComponent],
  imports: [
    CoreModule,
    CommonModule,
    AppRoutingModule,
    HttpClientModule,
    StoreModule.forRoot(reducers, { metaReducers }),
    StoreDevtoolsModule.instrument({ maxAge: 25 }),
    EffectsModule.forRoot([SomeEffects]),
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      multi: true,
      deps: [ConfigService],
      useFactory: (appConfigService: ConfigService) => {
        return () => {
          return environment.production
            ? appConfigService.loadAppConfigProduction()
            : appConfigService.loadAppConfigDevelopment();
        };
      },
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

I have tried putting the imports last, using it in another module with forFeature, and registering the effects through the provider instead, as per documentation. (https://ngrx.io/guide/effects)

There are similar threads, but none with a solution that has worked for me https://github.com/ngrx/platform/issues/489 ngrx EffectsModule makes Http service undefined

Removing the EffectsModule solves the problem, but then I don't have my effects.

Answer 1

According to the NgRx documentation, @ngrx/effects@12 requires Angular 12. I would start by either upgrading to Angular 12 or downgrading your effects module to version 11.