Installation (Angular)

Check our Angular example application

To install Tolgee Angular integration library, run the following:

npm

npm install @tolgee/ngx

yarn

yarn add @tolgee/ngx

pnpm

pnpm install @tolgee/ngx

Then import NgxTolgeeModule in your module file (app.module.ts or other):

...
import {
  DevTools,
  NgxTolgeeModule,
  Tolgee,
  TOLGEE_INSTANCE,
  FormatSimple
} from '@tolgee/ngx';
...
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    NgxTolgeeModule,
    ...
  ],
  providers: [
    {
      provide: TOLGEE_INSTANCE,
      useFactory: () => {
        return Tolgee()
          .use(DevTools())
          .use(FormatSimple())
          .init({
            language: 'en'

            // for development
            apiUrl: environment.tolgeeApiUrl,
            apiKey: environment.tolgeeApiKey,

            // for production
            staticData: {
              ...
            }
          });
      },
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Check all tolgee options and tolgee plugins.

So you have to:

1. Add NgxTolgeeModule to your import section
2. Add Factory provider for TOLGEE_INSTANCE token returning your Tolgee instance.

Use angular application environments to configure apiUrl and apiKey.

Preparing for production

Tolgee will automatically omit DevTools from your bundle when you build your app for production. So it won't fetch translations directly from Tolgee Platform and it won't allow users to modify translations.

There are generally two ways how to use translations in production:

• Tolgee Content Delivery - translations are loaded dynamically from fast and reliable storage
• Providing localization files directly - your translations are bundled with your code

In production mode, you should never use localization data directly from Tolgee REST API, because it can negatively affect your page performance.