Angular 5中两个forRoot模块共存报错问题咨询

我来帮你解决这个头疼的问题！你遇到的冲突其实是模块加载顺序和请求拦截规则导致的，完全可以让这两个模块和平共处，只要调整下配置和导入顺序就行。

报错原因分析 #

1. 模块导入顺序错误：你的代码里HttpClientModule是在HttpClientInMemoryWebApiModule和TranslateModule之后导入的——但Angular中，所有依赖HttpClient的模块，必须在HttpClientModule完成初始化后才能正常工作。顺序搞反会直接导致依赖注入出现异常。
2. InMemory模块拦截了翻译请求：HttpClientInMemoryWebApiModule的核心作用是拦截所有HttpClient发起的请求，返回你定义的模拟数据。而TranslateModule的loader默认会发起HTTP请求加载翻译文件（比如assets/i18n/en.json这类静态资源），如果你的InMemorySearchDataService里没有配置对应这些文件的模拟数据，它就会返回错误，直接导致翻译加载失败，进而抛出你看到的异常。

解决方案 #

按照下面两步调整，就能让两个模块正常协同工作：

1. 调整模块导入顺序 #

把HttpClientModule移到所有依赖它的模块最前面，确保它先完成初始化，为后续模块提供可用的HttpClient实例。

2. 配置InMemory模块绕过翻译请求 #

在HttpClientInMemoryWebApiModule.forRoot()的配置项里添加passThruUnknownUrl: true，这样当遇到InMemory服务没有匹配规则的请求（比如翻译文件的请求）时，会直接放行，让请求走到真实的静态文件路径去加载。

修改后的完整Imports代码 #

imports: [
  // 首先导入HttpClientModule，确保其他依赖模块能获取到HttpClient实例
  HttpClientModule,
  BrowserModule,
  DataTablesModule,
  FormsModule,
  AppRoutingModule,
  ToasterModule,
  NoopAnimationsModule,
  BrowserAnimationsModule,
  MaterialModule,
  ImageZoomModule,
  // 配置InMemory模块，添加passThruUnknownUrl绕过未匹配的请求
  HttpClientInMemoryWebApiModule.forRoot(
    InMemorySearchDataService,
    {
      dataEncapsulation: false,
      passThruUnknownUrl: true // 关键配置：放行InMemory未定义的请求
    }
  ),
  TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [HttpClient]
    }
  }),
  QuillEditorModule,
  NgxGalleryModule
],

补充说明 #

• passThruUnknownUrl参数会让InMemory模块只拦截那些你在InMemorySearchDataService里定义了模拟数据的请求，其他请求（比如翻译文件、静态资源）都会正常发送到真实地址。
• 如果你需要更精细的控制，也可以通过自定义拦截规则来指定哪些请求需要被模拟、哪些需要放行，但对于翻译文件这类静态资源，直接放行是最简单高效的方案。

内容的提问来源于stack exchange，提问作者pierre