Error when compiling Universal Angular with ngx-translate

问题

I am configuring ngx-translate as follows:

translate-server-loader.service.ts

import {Observable} from "rxjs/Observable";
import {TranslateLoader} from '@ngx-translate/core';
import { Injectable } from '@angular/core';
import {makeStateKey, StateKey, TransferState} from '@angular/platform-browser';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {HttpClient} from '@angular/common/http';

@Injectable()
export class TranslateBrowserLoader implements TranslateLoader {

  constructor(private prefix: string = 'i18n',
              private suffix: string = '.json',
              private transferState: TransferState,
              private http: HttpClient) {

  }

  public getTranslation(lang: string): Observable<any> {

    const key: StateKey<number> = makeStateKey<number>('transfer-translate-' + lang);
    const data = this.transferState.get(key, null);

    // First we are looking for the translations in transfer-state, if none found, http load as fallback
    if (data) {
      return Observable.create(observer => {
        observer.next(data);
        observer.complete();
      });
    } else {
      return new TranslateHttpLoader(this.http, this.prefix, this.suffix).getTranslation(lang);
    }
  }
}

src/app/app.server.module.ts

import { NgModule } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import {HttpClientModule, HttpClient} from '@angular/common/http';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import {makeStateKey, StateKey, TransferState} from '@angular/platform-browser';
import {TranslateServerLoader} from './translate-server-loader.service';


@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ServerTransferStateModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: translateFactory,
        deps: [TransferState]
      }
    }),
    TranslateHttpLoader
  ],
  bootstrap: [AppComponent],
  providers:[TranslateHttpLoader]
})
export class AppServerModule { }

export function translateFactory(transferState: TransferState) {
  return new TranslateServerLoader(transferState);
}

translate-browser-loader.service.ts

import {Observable} from "rxjs/Observable";
import {TranslateLoader} from '@ngx-translate/core';
import { Injectable } from '@angular/core';
import {makeStateKey, StateKey, TransferState} from '@angular/platform-browser';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {HttpClient} from '@angular/common/http';

@Injectable()
export class TranslateBrowserLoader implements TranslateLoader {

  constructor(private prefix: string = 'i18n',
              private suffix: string = '.json',
              private transferState: TransferState,
              private http: HttpClient) {

  }

  public getTranslation(lang: string): Observable<any> {

    const key: StateKey<number> = makeStateKey<number>('transfer-translate-' + lang);
    const data = this.transferState.get(key, null);

    // First we are looking for the translations in transfer-state, if none found, http load as fallback
    if (data) {
      return Observable.create(observer => {
        observer.next(data);
        observer.complete();
      });
    } else {
      return new TranslateHttpLoader(this.http, this.prefix, this.suffix).getTranslation(lang);
    }
  }
}

app.module.ts

import { BrowserModule, BrowserTransferStateModule, TransferState } from '@angular/platform-browser';
import { ModuleWithProviders, NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { BetsComponent } from './bets/bets.component';
import { BetsEventComponent } from './bets-event/bets-event.component';
import { CountriesComponent } from './countries/countries.component';
import { InformationComponent } from './information/information.component';
import { JackpotComponent } from './jackpot/jackpot.component';
import { PromotionsComponent } from './promotions/promotions.component';
import { ResultComponent } from './result/result.component';
import { PromotionDetailsComponent } from './promotion-details/promotion-details.component';
import { TopFootballComponent } from './top-football/top-football.component';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { ClipboardModule } from 'ngx-clipboard';
import {TooltipModule} from 'primeng/primeng';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import {TranslateBrowserLoader} from './translate-browser-loader.service';
import {TranslateServerLoader} from './translate-server-loader.service';


import {
  MenuLeftComponent,
  FooterComponent,
  HeaderComponent,
  BetslipComponent,
  MenuBottomMobileComponent,
  SharedModule,
  FixtureService,
  BetslipService,
  TypeBetsService,
  TicketService,
  TimeService,
  PaginationService,
  TranslateTbet,
  CompetitionService,
  ResultService,
  NumberOnlyDirective
} from './shared';
import {
  CashierComponent,
  InPlayComponent,
  InboxComponent,
  LoginComponent,
  ProfileComponent,
  RegisterComponent,
  TicketsComponent,
  TicketWinLoseComponent,
  BetslipMobileComponent,
  CheckTicketsComponent,
  ContactUsComponent,
  CollapseComponent,
  CollapseModule,
} from './collapse';
import { CompetitionsComponent } from './competitions/competitions.component';

const rootRouting: ModuleWithProviders = RouterModule.forRoot([
  {path:'',component:HomeComponent},
  {path:'competitions/:id', component: CompetitionsComponent},
  {path:'match-bets/:idFixture', component: BetsEventComponent},
  {path:'results', component: ResultComponent},
  {path:'results/:nameLeague', component: ResultComponent},
  {path:'results/:nameLeague/:dateTime', component: ResultComponent},
  {path:'jackPot', component: JackpotComponent},
  {path:'promotions', component: PromotionsComponent},
  {path:'information/:idInformation', component:InformationComponent},
  {path:'promotionDetails', component: PromotionDetailsComponent},
  {path:'topFootball', component: TopFootballComponent},
  {path:'countries', component: CountriesComponent},
  {path:':id', component: BetsComponent},
], { useHash: false });

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    BetsComponent,
    BetsEventComponent,
    CountriesComponent,
    InformationComponent,
    JackpotComponent,
    PromotionsComponent,
    ResultComponent,
    PromotionDetailsComponent,
    TopFootballComponent,
    HeaderComponent,
    FooterComponent,
    MenuLeftComponent,
    BetslipComponent,
    MenuBottomMobileComponent,
    TicketWinLoseComponent,
    InPlayComponent,
    TicketsComponent,
      CheckTicketsComponent,
    LoginComponent,
    InboxComponent,
    RegisterComponent,
    CashierComponent,
    ProfileComponent,
    ContactUsComponent,
    BetslipMobileComponent,
    CollapseComponent,
    TranslateTbet,
    NumberOnlyDirective,
    CompetitionsComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    rootRouting,
    SharedModule,
    CollapseModule,
    HttpModule,
    HttpClientModule,
    BrowserTransferStateModule,
    BrowserModule.withServerTransition({
        appId: 'ng-universal-demystified'
    }),
    ClipboardModule,
    TooltipModule,
    TranslateModule.forChild({
        loader: {
          provide: TranslateLoader,
          useFactory: exportTranslateStaticLoader,
          deps: [HttpClient, TransferState]
        }
      }
    )
  ],
  providers: [
    FixtureService,
    BetslipService,
    TypeBetsService,
    TicketService,
    TimeService,
    PaginationService,
    TranslateTbet,
    NumberOnlyDirective,
    CompetitionService,
    ResultService,
    TransferState,
    TranslateModule,
    TranslateBrowserLoader,
    TranslateServerLoader,
    TranslateHttpLoader

  ],
  bootstrap: [AppComponent]
})

export class AppModule { }


export function exportTranslateStaticLoader(http: HttpClient, transferState: TransferState) {
   return new TranslateBrowserLoader(transferState, http);
}

after compiling with the command:

npm run build

And it gives the following error:

ERROR in : Can't resolve all parameters for TranslateHttpLoader in /home/carlos/Proyectos/website/node_modules/@ngx-translate/http-loader/ngx-translate-http-loader.d.ts: ([object Object], ?, ?).,

please help!

来源：https://stackoverflow.com/questions/49602976/error-when-compiling-universal-angular-with-ngx-translate