[SOLVED] Angular translation not working with angular 9

Angular translation not working with angular 9

I have an Angular9 app. Apart from the app.module.ts there is one more module, custom.module.ts. Here is the

package.json

"@angular/cdk": "^9.2.4",
"@angular/common": "9.1.11",
"@angular/compiler": "9.1.11",
"@angular/core": "9.1.11",

For translation

1) I have added @ngx-translate/core and @ngx-translate/http-loader

"@ngx-translate/core": "10.0.2",
"@ngx-translate/http-loader": "^5.0.0",

2) then in app.module.ts under imports

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

and

// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient): any {
    return new TranslateHttpLoader(http, "./assets/i18n/");
}

Same i did for my custom.module.ts.

3) app.component.ts

// Add languages
this.translateService.addLangs(["en", "nb", "sv"]);

// Use a language
this.translateService.setDefaultLang("en");
this.translateService.use("en");

4) files in assets/i18n/en.json

{
    "noSelectMessage": "Select to see detail."
}

and now where i use traslate pipe in a component of custom.moule.ts

<span>{{'noSelectMessage' | translate}}</span>

it shows same noSelectMessage

and If i check source tab in browser there is no i18n folder under assets.

What can be the issue?

Solution

I was using the translation service in a component of custom.module.ts and in custom.module.ts file I was doing

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

all I need to do is to just import TranslateModule, to support translate pipe.