Angular forRoot 方法可以从另一个模块返回 forRoot 吗？答案

【问题标题】：Can Angular forRoot method return forRoot from another module?Angular forRoot 方法可以从另一个模块返回 forRoot 吗？
【发布时间】：2018-09-18 08:20:48
【问题描述】：

我想知道静态方法 forRoot 是否可以从另一个模块返回 forRoot 调用？

我刚刚配置了 ngrx 存储，并希望避免在 app.module 中有很多导入，所以我创建了 ConfiguredStoreModule 并在 forRoot 方法中返回 StoreModule.forRoot(config)。一切正常，但这种方法是否违反了任何好的做法或惯例？这样做的另一个优点是可以注册已在效果中使用的提供者，它们应该是单例的。一切都在一个地方。

// 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 {
}

【问题讨论】：

一个模块可以共享它的组件、服务和其他导入的模块，如果它们被导出，在这种情况下你不需要在另一个模块中再次导入它们，但是为了回答你的问题，我不要认为这是forRoot的目的，它用于告诉应用程序应该从哪个主模块开始，这就是为什么你不能有2个forRoot

标签： angular angular-module

【解决方案1】：

试试这个

// 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]
      },
    ]
  }

【讨论】：