How to load translations when the application starts

In ngx-translate, if you want to safely use .instant, you need to make sure the translations are loaded first. While instant is synchronous, the default translation file loader is asynchronous.

You can load the translations when the application starts via .use in the ngOnInit of your AppComponent.

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  stringInCode: string;

  constructor(private translate: TranslateService) {}

  async ngOnInit() {
    await this.translate.use('en').toPromise();
    this.stringInCode = this.translate.instant('TEXT');
  }
}