使用 TranslateModule 和 HttpClientInMemoryWebApiModule

Question

我正在尝试在我的 angular 项目翻译和客户端中包含内存 Web api。

好像他们有一些不兼容的问题，因为我无法解决HttpClient。

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

如果我只导入翻译，它就可以工作，我不能只用内存中的客户端尝试，因为它在每个模块中都使用。

我猜问题出在 HttpClient 上，因为两者都使用它，而且我认为它们来自不同的模块。

执行时，在 chorme 控制台中，我看到此错误，none 显示在页面

中

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

我找到了解决方案，需要在 HttpClientInMemoryWebApiModule 中添加一个属性:

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

而且有效！

使用 TranslateModule 和 HttpClientInMemoryWebApiModule

using TranslateModule and HttpClientInMemoryWebApiModule

angular-translate

angular

angular5