Core: ngx-translate pipe not working

[lucassklp]

I'm submitting a ... (check one with "x")

[x] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior
I got a en.json same with folowing statement:
{ "cancel":"Cancel request" }
It loads properly on the browser as images shows:

The app.module is right here:

`export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, "/assets/i18n/" , ".json");
}
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HttpModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (HttpLoaderFactory),
deps: [Http]
}
}),
...

export class AppModule {
constructor(private translate: TranslateService) {
translate.setDefaultLang('en');
translate.use('en');
}`

My HTML is:

`

{{ "cancel" | translate }}
{{ 'cancel' | translate }}

`

And the output is:

Expected/desired behavior
The button and the label must be "'Cancel Request', not 'cancel'".

Reproduction of the problem
The source code can be found at:
https://github.com/lucassklp/front-end-architecture

Please tell us about your environment:

• Angular CLI 1.6.3;
• Windows 10;
• Angular v5.0

• ngx-translate version: 9.0.2

• Angular version: 5.0.0

• Browser: [all]

[alexndreazevedo]

You are using Http instead HttpClient on TranslateModule.forRoot():

TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: HttpLoaderFactory,
    deps: [Http] // Here comes HttpClient instead Http
  }
}),