using TranslateModule and HttpClientInMemoryWebApiModule

Question

I'm trying to include in my angular proyect translation and client in memory web api.

It seems they have some incompatibility because of HttpClient I can't solve.

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, LOCALE_ID, NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { routing } from './app.routing';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { FlexLayoutModule } from '@angular/flex-layout';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { AppTranslateLoader } from './misc/app.translation-loader';
import { AppErrorHandler } from './misc/app.error-handler';
import { AppLanguageService } from './misc/app-language.service';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data.service';



export function getLocaleId(appLanguageService: AppLanguageService) {
  const sessionLanguage = appLanguageService.getSessionLanguage();
  return sessionLanguage.localeId;
 }

@NgModule({

declarations: [
     AppComponent,
],
imports: [
   HttpClientModule,
   HttpClientInMemoryWebApiModule.forRoot(
      InMemoryDataService, { dataEncapsulation: false }
    ),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: AppTranslateLoader,
        deps: [HttpClient]
      }
    })
],
providers: [
  AppLanguageService,
  {provide: ErrorHandler, useClass: AppErrorHandler},
  {provide: LOCALE_ID, useFactory: getLocaleId, deps: 
   [AppLanguageService]}
],
 bootstrap: [AppComponent]
})
export class AppModule { }

If I import just translate, it works, I can't try just with client in memory because it's used in every module.

I guess the problem is HttpClient because both use it and I think they are form different modules.

When execute, in chorme console, I watch this error and none shown in page

Error: [object Object]
at viewWrappedDebugError (core.js:9790)
at callWithDebugContext (core.js:15100)
at Object.debugCreateRootView [as createRootView] (core.js:14373)
at ComponentFactory_.create (core.js:11260)
at ComponentFactoryBoundToModule.create (core.js:4031)
at ApplicationRef.bootstrap (core.js:5855)
at eval (core.js:5582)
at Array.forEach (<anonymous>)
at PlatformRef._moduleDoBootstrap (core.js:5582)
at eval (core.js:5503)

Error: [object Object]
at viewWrappedDebugError (core.js:9790)
at callWithDebugContext (core.js:15100)
at Object.debugCreateRootView [as createRootView] (core.js:14373)
at ComponentFactory_.create (core.js:11260)
at ComponentFactoryBoundToModule.create (core.js:4031)
at ApplicationRef.bootstrap (core.js:5855)
at eval (core.js:5582)
at Array.forEach (<anonymous>)
at PlatformRef._moduleDoBootstrap (core.js:5582)
at eval (core.js:5503)

Answer 1

I found the solution, it's necesary to add a property to HttpClientInMemoryWebApiModule:

HttpClientInMemoryWebApiModule.forRoot(
   InMemoryDataService, {  passThruUnknownUrl: true, dataEncapsulation: false }
),

And it works!