由于共享服务，两次导入相同的模块

Question

如果我的 Angular 应用程序的主模块中有以下场景会发生什么？

在 app.module.ts 上，我使用 forRoot() 导入模块 TranslateModule 以对其进行配置并使其可用于所有应用程序。在 shared.module.ts 中，我导出该模块，以便其他模块可以使用它。在 shared.module.ts 中我还导出服务，因此我创建了 forRoot() 方法并将其导入 app.module.ts。

这样我导入 TranslateModule 两次。一个直接在 app.module.ts 中，带有 forRoot 形式，另一个通过 shared.module.ts。这样做有问题吗？如果存在，如何解决？

app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule.forRoot(),
    ComponentsModule,
    DashboardModule,
    OtherModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    SharedModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})

shared.module.ts

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [],
  exports: [
    TranslateModule
  ]
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [CounterService]
    };
  }
}

Answer 1

上述方法应该可以正常工作。按照上面的操作不会有任何问题。

一旦您的 app.module.ts 配置了 ngx-translate，您就可以使用 ngx-translate 存储库中提到的 shared.module 在其他模块上实现，那么您不必担心每次都导入 TranslateModule .你只需要在你的 shared.module 中添加这个：

在 this.

上阅读更多信息