Unable to translate in hybrid app (AngularJS + Angular 8)

[YashJipkate]

I have a hybrid app which has pascalprecht.translate in the AngularJS side and I am trying to introduce ngx-translate to the Angular side.

On doing some console logging, I found that the different language's json files are correctly loaded which means the loader must be correctly working. It's just that when I use that in my template as <a ... [translate]='I18N_ABOUT_PAGE_TABS_ABOUT'>, it simply converts to translate="yes" but no text would appear.

I tried using the service way like this

  constructor(private translate: TranslateService) {
    translate.setDefaultLang('fr');
    translate.setTranslation('fr', {
      HELLO: 'hello world'
    });
    translate.use('fr');
    translate.get('HELLO').subscribe((res: string) => {
      console.log(res);
    });
  }

It just outputs 'HELLO' which means it is not finding the translation even if it is right there.

Here is my root module.

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
  ]
})

Any help is appreciated! Thanks!

EDIT I realized that if using HttpLoader, I should not use setTranslation and therefore I have removed that line. And it outputs the translation as expected, but only in the console. It still is blank in the template with translate="yes".

EDIT Just to let you know, I already referred to #917 but it does not solve my use case since the issue was about using ngx-translate in AngularJS but I am looking to implement it correctly in the Angular part only

[skoblenick]

Try the below instead:

[translate]="'I18N_ABOUT_PAGE_TABS_ABOUT'"