Preparing for production (Angular)

In production mode you should never use localization data from Tolgee REST API and you should never leak your API key. You should use data exported from Tolgee platform. To get exported localization files, see exporting translations.

There are multiple options to provide static localization data for production builds. Providing a URL prefix where Tolgee can fetch the data from or providing imported data as reference or provider in NgxTolgeeModule.forRoot(...) config property.

Providing data using dynamic import (recommended)

To provide your localization data using dynamic import you will need to add providers for every supported language to staticData configuration property.

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NgxTolgeeModule } from '@tolgee/ngx';
import { environment } from '../environments/environment';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxTolgeeModule.forRoot({
      staticData: {
        en: () => import('../assets/i18n/en.json'),
        cs: () => import('../assets/i18n/cs.json'),
      },
    }),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Using this approach data will be fetched just when it's needed, so you will save some network traffic.

Using imported object

This approach just provides localization data as imported object.

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NgxTolgeeModule } from '@tolgee/ngx';
import { environment } from '../environments/environment';
import { FormsModule } from '@angular/forms';
import * as localeCs from '../assets/i18n/cs.json';
import * as localeEn from '../assets/i18n/en.json';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxTolgeeModule.forRoot({
      staticData: {
        en: localeEn,
        cs: localeCs,
      },
    }),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

This way, all localization data are bundled with your application, so it will be downloaded with your application code.

Providing data using filesUrlPrefix option (default)

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NgxTolgeeModule } from '@tolgee/ngx';
import { environment } from '../environments/environment';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxTolgeeModule.forRoot({
      // this value is default, so we could have omitted this property
      filesUrlPrefix: 'assets/i18n/',
    }),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

This option tells Tolgee, that localization data (en.json, cs.json) can be found on https://yoururl.com/assets/i18n/, so it will be fetched with every page load.