Core: this.currentLoader.getTranslation is not a function

[mic0331]

I'm trying to familiarize myself with this package. I loaded ng2-translate with the code available in the documentation with some changes (like providers etc.) but I'm still getting an issue,

this.currentLoader.getTranslation is not a function

Here is my code

import { Component, Injectable, provide } from '@angular/core';
import { Http } from '@angular/http';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { TRANSLATE_PROVIDERS, TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader } from 'ng2-translate/ng2-translate';
import { HTTP_PROVIDERS } from '@angular/http';

import { TransactionListcomponent } from './transactions/transaction-list.component';

@Component({
    selector: 'my-app',
    template: `
    <div>
        <h1>{{pageTitle}}</h1>
        <h1>Hello, {{name}}!</h1>
        Say "<b>{{ 'HELLO' | translate:'{value: "world"}' }}</b>" to: <input [value]="name" (input)="name = $event.target.value">
        <br/>
        Change language:
        <select (change)="translate.use($event.target.value)">
            <option *ngFor="#lang of ['fr', 'en']" [selected]="lang === translate.currentLang">{{lang}}</option>
        </select>
        <my-transactions></my-transactions>
    </div>
    `,
    directives: [TransactionListcomponent],
    pipes: [TranslatePipe],
    providers: [TranslateService, TranslateLoader]
})

export class AppComponent {
    pageTitle: string = 'Test app';
    name: string = 'World';

    constructor(translate: TranslateService) {
        var userLang = navigator.language.split('-')[0]; // use navigator lang if available
        userLang = /(fr|en)/gi.test(userLang) ? userLang : 'en';

         // this language will be used as a fallback when a translation isn't found in the current language
        translate.setDefaultLang('en');
        console.log(translate)

         // the lang to use, if the lang isn't available, it will use the current loader to get them
        translate.use(userLang);
    }
 }

// Instantiate TranslateService in the bootstrap so that we can keep it as a singleton
 bootstrap(AppComponent, [
    HTTP_PROVIDERS,
    { 
        provide: TranslateLoader,
        useFactory: (http: Http) => new TranslateStaticLoader(http, 'app/assets/i18n', '.json'),
        deps: [Http]
    },
    // use TranslateService here, and not TRANSLATE_PROVIDERS (which will define a default TranslateStaticLoader)
    TranslateService
]);

Does anyone can help me?

[ocombe]

Your error is to add providers: [TranslateService, TranslateLoader] to your component. Since you bootstrapped both services, you shouldn't add them as providers of your component, they have already been provided by the bootstrap :)

[mic0331]

thanks @ocombe for your reply however, if I comment the providers line I got a

ORIGINAL EXCEPTION: No provider for TranslateService!

[ocombe]

hmm that's really weird...
If you update to angular 2 RC5 you can use the new NgModules and import TranslateModule, that should fix the problem for you though

[ryanki1]

I've added following to app.module.ts, but still getting original getTranslation is not a function error:

  .. 
  imports: [
    IonicModule.forRoot(MyApp),
    TranslateModule
  ],..

using following ionic profile:
Gulp version: CLI version 3.9.0
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: Not installed
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.5.0
Xcode version: Xcode 8.0 Build version 8A218a

[thanikc]

@ryanki1 Have you solved this?

[ryanki1]

@thanikc With the latest versions this shouldn't be a Problem anymore :-)

[oussamaABID]

user TranslateHttpLoader.

 import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    HttpClientModule,
    TranslateModule.forRoot(), BrowserModule,
//....
  ],
  providers: [{
    provide: TranslateLoader,
    useFactory: (http: HttpClient) => new TranslateHttpLoader(http, '/assets/i18n/', '.json'),
    deps: [HttpClient]
  }],
  bootstrap: [AppComponent]

[C0ZEN]

This is a very old question nevertheless I had the same problem today after migrating to Angular 8.
This may help someone.

Note:
The problem was not coming from the migration to Angular 8.

app.module.ts

imports: [
    TranslateModule.forRoot({
        loader: HttpLoaderMultipleProvider
    }),
]

http-loader-multiple.provider.ts

export const HttpLoaderMultipleProvider = {
    deps: [
        HttpClient
    ],
    multi: true, // This was causing the error
    provide: TranslateLoader,
    useFactory: (HttpLoaderMultipleFactory)
};

I just removed the multi value and the problem was fixed.