Ngx转换带有共享/延迟加载模块

Question

可能是最常见的问题之一，而我发现的文档和其他一些问题试图为我解决问题，但是我仍然不确定如何解决此问题。

这是我的结构：

• 应用模块当然是引导的主要模块
• Countryselector模块：负责加载默认国家（基于IP），并根据浏览器决定使用哪种语言。基本上，它是决定使用哪个国家/地区语言的核心功能，并且包含一个供用户更改国家/地区语言的下拉菜单。
• 结帐模块，选择模块，付款模块都通过路由延迟加载。

应用模块

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    AppRoutingModule,
    ContrySelectorModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  export class AppModule { }

CountrySelectorModule

@NgModule({
  declarations: [CountryselectorComponent],
  imports: [
    CommonModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  exports: [
    CountryselectorComponent
  ]
})
export class ContrySelectorModule { }

选择模块：

@NgModule({
  declarations: [SelectionComponent],
  imports: [
    CommonModule,
    SelectionRoutingModule,
    UspblockModule,
    TranslateModule.forChild({//or forRoot, no idea how to configure this
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }})
  ],
})
export class SelectionModule { }

现在的问题是，我不想在延迟加载的模块中再次进行语言配置，因为国家/地区选择器模块已经解决了这一问题。我现在不确定如何正确配置延迟加载的模块（并且实际上不确定countrySelectorModule是否正确完成）。使用标准的github文档，我无法做到这一点。.forChild()到目前为止，我已经尝试过弄乱但没有运气。

我需要共享模块吗？我是否需要在任何地方导入countrySelectorModule（不推荐）？定制装载机？tbh我不知道，对于更高级的场景，文档太短了。

Answer 1

我通过执行以下操作解决了这个问题：

1. CoreModule使用以下代码创建一个（基本上是一个共享模块）

核心模块

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

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    TranslateModule.forChild({
      loader: {
      provide: TranslateLoader,
      useFactory: HttpLoaderFactory,
      deps: [HttpClient]
    },
    isolate: false
}),
  ],
  exports: [TranslateModule],
})
export class CoreModule {

  static forRoot(): ModuleWithProviders {
    return {
      ngModule: CoreModule,
      providers: [ShoppingCartService, AccountService]
    }
  }
}

因此，这可以确保为每一个模块导入CoreModule，TranslateModule将使用相同的配置。确保将其导出。该forRoot()还解决了确保ShoppingCartService和AccountService只有一个实例，不是每个懒惰模块创建一个单独的服务。

3. 更改AppModule：

应用模块

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    AppRoutingModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      isolate : false
    }),
    CoreModule.forRoot(),
    ContrySelectorModule,

  ],
  providers: [    ],
  bootstrap: [AppComponent]
})
export class AppModule { }

由于AppModule是您的主要切入点，因此forRoot()请在此处致电TranslateModule

3. 任何延迟加载的模块都只需导入CoreModule而无需任何方法调用。同样CountrySelectorModule在我的示例中，必须仅导入CoreModule而没有其他内容。