ngx-translate .pipe is not a function

Question

I'm getting the following error when using ngx-translate:

this.currentLoader.getTranslation(...).pipe is not a function
at TranslateService.getTranslation (core.es5.js:3171)
at TranslateService.retrieveTranslations (core.es5.js:3157)
at TranslateService.setDefaultLang (core.es5.js:3098)
at new AppComponent (app.component.ts:11)
at createClass (core.js:12470)
at createDirectiveInstance (core.js:12315)
at createViewNodes (core.js:13776)
at createRootView (core.js:13665)
at callWithDebugContext (core.js:15090)
at Object.debugCreateRootView [as createRootView] (core.js:14373)

this is my app component:

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor(private translate: TranslateService) {
        translate.setDefaultLang('en');
        translate.use('en');
    }
}

Here I import the module and i have it declared above using import as well

 imports: [
            TranslateModule.forRoot()
    ]

I'm also importing the TranslateService:

providers: [
        TranslateService
    ],

If I remove the lines within the constructor I do not get the errors, but that means I won't have translation either. I have created a json file in: ClientApp/assets/i18n/en.json

I am running this on a .net core template provided by Visual Studio. I upgraded the template from Angular 4 to Angular 5. Other addons work fine, I just cannot work out the error.

Below are the versions: - "@ngx-translate/core": "9.1.1", - "@ngx-translate/http-loader": "2.0.1" - Angular 5.1.1

where are you using this ? this.currentLoader.getTranslation(...)? — Sajeetharan
I'm not. This is all the code i wrote for it. I ported the project to the new template using angular 5.2 with .net core 2. It works in there! — Joshua Stelten

qorsmond qorsmond · Accepted Answer · 2018-06-12T09:51:58

You need to use the TranslateHttpLoader to load translations from "/assets/i18n/en.json"

...
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
...

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http);
}

@NgModule({
    imports: [
       BrowserModule,
       HttpClientModule,
       TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
          }
      })
   ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

ngx-translate .pipe is not a function

2 Answers