Ng2-Translate loading json lazy

Question

I am using the Ng2-Translate i am facing a problem where once the application is loaded i cannot able to see the translations from the json file.

Import that i have done:

import { TranslateService } from 'ng2-translate';

Code:

ngOnInit() {
    this.translations.instant('message');
}

But, when visiting the component again i can see that the translations are being loaded. I am loading this trnaslation in ngOnInit(). Can anybody suggest why its not loaded at first time.

App Module :

Code:

   import { TranslateLoader, TranslateModule, TranslateStaticLoader } from 'ng2-translate';


        export function createTranslateLoader(http: Http, config: Configuration) {
            return new TranslateStaticLoader(http, config.i18NUrl, '.json');
        }


@NgModule({
    imports: [  

        SharedModule.forRoot(),
        TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: (createTranslateLoader),
            deps: [Http, Configuration],
        }),
        TranslationUtilModule,
        CovalentLayoutModule.forRoot(),
        FlexLayoutModule,
        BootstrapGrowlModule,
    ],
    declarations: [AppComponent],
    providers: [
        TranslateModule,        
        { provide: Configuration, useFactory: Configuration.createConfiguration(), deps: [] },
    ],
    bootstrap: [AppComponent],
})