this.currentLoader.getTranslation is not a function

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?