Translation not loaded at start up in Angular app

Question

I encounter this problem on both ngx-translate and transloco in my Angular 15 app, so it might be a configuration issue.

When my app is loaded, in the app.component.ts, depending on if the user is logged in or not, he is redirected to the login component or the authenticated route I configured. Both are lazy loaded modules. The translations on the page loaded are not showing (not even the translation key). On the authenticated route, when I refresh, the translations are loaded only after a refresh or language change. This only happens when I try to use the default language though.

Here is my configuration:

transloco-root.module.ts

@Injectable({ providedIn: 'root' })
export class TranslocoHttpLoader implements TranslocoLoader {
  constructor(private http: HttpClient) {}

  getTranslation(lang: string) {
    return this.http.get<Translation>(`/assets/i18n/${lang}.json`);
  }
}

@NgModule({
  exports: [TranslocoModule],
  providers: [
    {
      provide: TRANSLOCO_CONFIG,
      useValue: translocoConfig({
        availableLangs: ['en', 'fr'],
        defaultLang: 'en',
        // Remove this option if your application doesn't support changing language in runtime.
        reRenderOnLangChange: true,
        prodMode: environment.production,
      }),
    },
    { provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader },
  ],
})
export class TranslocoRootModule {}

app.module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    BrowserModule,
    HttpClientModule,
    MatIconModule,
    MatSnackBarModule,
    CoreModule,
    ModulesModule,
    SharedModule,
    StoreModule.forRoot({}),
    EffectsModule.forRoot(),
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
      logOnly: !isDevMode(), // Restrict extension to log-only mode
      autoPause: true, // Pauses recording actions and state changes when the extension window is not open
      trace: false, //  If set to true, will include stack trace for every dispatched action, so you can see it in trace tab jumping directly to that part of code
      traceLimit: 75, // maximum stack trace frames to be stored (in case trace option was provided as true)
    }),
    TranslocoRootModule,
  ],
  providers: [{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts

  ngOnInit(): void {
    if (authenticated) {
        ...
        this.router.navigate(['customers']);
    } else {
        this.router.navigate(['login']);
    }
  }

login.module.ts

@NgModule({
  declarations: [LoginComponent],
  imports: [CommonModule, LoginRoutingModule, TranslocoModule],
  exports: [LoginComponent],
})
export class LoginModule {}

login.component.html

  <div id="sign-in-btn" class="sign-in">
    <button (click)="this.redirect()">{{ 'LOGIN.SIGN_IN' | transloco }}</button>
  </div>

I tried to force load the language and redirect after with transloco.load('en').subscribe(() => this.router.navigate(['login']); but it never redirects. I took a look on the requests and the en.json file is never loaded.

I also tried to use the APP_INITIALIZER but didn't work.

Translation not loaded at start up in Angular app

0 Answers0