Angular 7: Translate service in component does not work, but in HTML works fine

Current behavior

In my project, I load the TranslateModule as follows:

app.module.ts

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

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

app.component.ts

  constructor(
    private translate: TranslateService,
    private store: Store<AppState>
  ) {
    translate.setDefaultLang('en');
    translate.use('en');
  }

In the web pages for the app components, translates work correctly. But, in the component Typescript code the translate service returns the key and not the translate. For example:

const filter = this.translate.instant('toolbar.action-filter-options.all-actions');

Expected behavior

Expecting the method call to return the translation for the string.

How do you think that we should fix this?

If this is a user error, I’m not sure what it could be. I use @ngx-translate in another project and it works correctly there.

Minimal reproduction of the problem with instructions

Environment

ngx-translate version: 11.0.1 
Angular version: 7.2.0


Browser:
- [X] Chrome (desktop) version  73.0.3683.86
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v10.15.0
- Platform: Mac

Others:

[Ferrzo]

@mcpierce You are calling instant method. It’s possible that translations are not yet loaded when you call it. You could try to use something like translate.get(‘test’) . Then subscribe and wait when translations are loaded and then use instant ().

[mcpierce]

@mcpierce You are calling instant method. It’s possible that translations are not yet loaded when you call it. You could try to use something like translate.get(‘test’) . Then subscribe and wait when translations are loaded and then use instant ().

I think that’s the case, which is strange since on another project doing the same works consistently. But on this project I have the code waiting for a language change before generating the text and it works now.