Can Angular forRoot method return forRoot from another module?

Question

I'm wondering if static method forRoot can return forRoot invocation from another module?

I've just configured ngrx store and want to avoid having many imports in app.module so I created ConfiguredStoreModule and in forRoot method I return StoreModule.forRoot(config). Everything works but does this aproach break any good practices or conventions? Another advantage of this is possibility to register providers that have been used in effects and they should be singletons. Everything is in one place.

// ConfiguredStore.module.ts
import {ModuleWithProviders, NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import {metaReducers, reducers} from './index';
import {StoreModule} from '@ngrx/store';
import {TestService} from './my-budgets/test.service';
import {myBudgetsEffects} from './my-budgets/effects';
import {EffectsModule} from '@ngrx/effects';

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [],
  exports: [

  ]
})
export class ConfiguredStoreModule {
  static forRoot(): ModuleWithProviders[] {
    return [
      StoreModule.forRoot(reducers, {metaReducers}),
      EffectsModule.forRoot([...myBudgetsEffects, /*...effects from another folder*/]),
      {
        ngModule: ConfiguredStoreModule,
        providers: [TestService]
      },
    ]
  }

}

// AppModule
import {BrowserModule} from '@angular/platform-browser';
import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {HttpModule} from '@angular/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ScrollToModule} from '@nicky-lenaers/ngx-scroll-to';
import {StoreModule} from '@ngrx/store';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import { HttpClientModule} from '@angular/common/http';
import {CoreModule} from './modules/core/core.module';
import 'lodash';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { environment } from '../environments/environment';
import { reducers, metaReducers } from './store';
import {ConfiguredStoreModule} from './store/store.module';


export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppRoutingModule,
    CoreModule,
    //StoreModule.forRoot(reducers, { metaReducers }),
    ConfiguredStoreModule.forRoot(),
    !environment.production ? StoreDevtoolsModule.instrument() : [],
  ],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {
}

Answer 1

Since Angular 9, you have to explicitly provide the type of ModuleWithProviders. This should work:

static forRoot(): ModuleWithProviders<ConfiguredStoreModule> {
    return {
        ngModule: ConfiguredStoreModule,
        providers: [
            TestService,
            StoreModule.forRoot(reducers, { metaReducers }).providers,
            EffectsModule.forRoot([...myBudgetsEffects, /*...effects from another folder*/]).providers,
        ]
    };
}

Answer 2

Try this

// ConfiguredStore.module.ts
import {ModuleWithProviders, NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import {metaReducers, reducers} from './index';
import {StoreModule} from '@ngrx/store';
import {TestService} from './my-budgets/test.service';
import {myBudgetsEffects} from './my-budgets/effects';
import {EffectsModule} from '@ngrx/effects';

@NgModule({
  imports: [
    CommonModule,
    EffectsModule
  ],
  declarations: [],
  exports: [
    EffectsModule
  ]
})
export class ConfiguredStoreModule {
  static forRoot(): ModuleWithProviders[] {
    return [
      StoreModule.forRoot(reducers, {metaReducers}),
      EffectsModule.forRoot([...myBudgetsEffects, /*...effects from another folder*/]).providers,
      {
        ngModule: ConfiguredStoreModule,
        providers: [TestService]
      },
    ]
  }