Skip to main content
Version: 5.x.x

Installation

To use Tolgee in your Angular application, you need to follow these steps:

  1. Install the Tolgee integration library
  2. Configure the Tolgee API
  3. Set up the environment variables
  4. Preparing for production

Install the Tolgee integration library​

To install Tolgee integration library, run the following command:

npm install @tolgee/ngx

Configure the Tolgee module​

Once the library is installed, you need to import and initialize the NgxTolgeeModule in your module file (app.module.ts or other).

The updated code should look like this:

...
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 {}

The above code does the following:

  • Imports the required moudle, classes, and plugins from the integration library.
  • Configures the module
  • Configures the Tolgee instance to use the DevTools and FormatSimple plugins, and initializes it using the credentials.

You can configure more options and plugins during initialization. Learn about these other options and Tolgee plugins in their respective documentation.

Set up the environment variables​

Follow the instructions mentioned in the angular application environments documentation 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:

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

tip
You can also check the Angular example application to learn more.