Skip to main content
Version: 5.x.x

Installation (Angular)

Check our Angular example application to get a complete image of working Angular integration.

To install Tolgee Angular integration library, run the following:

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

So you have to:

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

This is a minimal configuration example. Tolgee can do much more. Read more in initialization, options, or tolgee plugins.

In the example, we imported FormatSimple, which handles simple parameter interpolation. If you need advanced formatting, consider using FormatICU. If you don't want to format your messages, you don't have to use any formatter plugin.

You can provide the API key and API URL directly, or you can use angular application environments.

That's it. Now you can use Tolgee for translating your strings.

Other configuration properties

Configuration properties for all web integrations are similar. They are described in options section.

Preparing for production

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

Then provide the data via Tolgee configuration options described in Providing static data.