Core: In html template is now working, {{ 'HOME.TITLE' | translate }} not get translated

[AlexBrend]

Below are my angular version and file not get translated as it only shows keys like "HOME.TITLE" not displaying it's value.
Angular CLI: 1.6.3
Angular: 5.1.2
ngx-translate version: 9.1.1
ngx-translate/http-loader: 2.0.0

In app.module.ts file :-

//Ref for multilanguage support: https://github.com/ngx-translate/core
import {TranslateModule, TranslateLoader} from "@ngx-translate/core";
import {TranslateHttpLoader} from '@ngx-translate/http-loader';

//For multilanguage support
export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, 'assets/languages/', '.json');
}

TranslateModule.forRoot({
          loader: {
              provide: TranslateLoader,
              useFactory: (createTranslateLoader),
              deps: [HttpClient]
          }
      })

In app.component.ts file :-

import {TranslateService} from '@ngx-translate/core';
constructor( private translate: TranslateService) 
      {
        translate.setDefaultLang('en');
        translate.use('en');
     }

In html trying to get like :-

<p>{{ 'HOME.TITLE' | translate }}</p>

[ocombe]

Do you see the translation files being loaded in the network tab of your browser?

[AlexBrend]

yes language file is being loaded in network and getting key value in response. As response is
{HOME: {TITLE: "Hello Angular with ngx-translate!", SELECT: "Change language"}}

[AlexBrend]

I am stuck in this since last two days , Please let me correct if i am wrong any where in my code. As same code is working in angular 5.0.1 version and 5.0.3 but not working with angular version 5.1.2 and 5.2.10

[stottle-uk]

I am also experiencing this problem and i can see the translation file loading in the network tab

```Angular CLI: 1.7.3
Node: 8.9.4
OS: win32 x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.2.4
@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0
`` translate.get('HOME.TITLE').subscribe(console.log);` outputs 'Hello Angular with ngx-translate!' to the console when use it in my app.component. But it outputs 'HOME.TITLE' when i use in a lazy loaded module

[AlexBrend]

i did that but getting in console as below :
translate.get('HOME.TITLE').subscribe(console.log); outputs 'HOME.TITLE' to the console

[ocombe]

Can you create a repro on stackblitz or github please? It's hard to see what's going on without that...

[stottle-uk]

Hi

I've created a stackblitz which seems to show the issue - even though it is using Angular 6 (it's a fork of your example)

https://stackblitz.com/edit/github-kk1mud

Apologies if i am missing something obvious

[ocombe]

Ok, here is the code working: https://stackblitz.com/edit/github-kk1mud-zkq6zp?file=src%2Fapp%2Fshared%2Fshared.module.ts
What I changed is that I moved the initialization of the lib to the root module (hence the name forRoot), and then use the SharedModule to share the TranslateModule, as explained in the documentation: https://github.com/ngx-translate/core#sharedmodule