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
- yarn
- pnpm
npm install @tolgee/ngx
yarn add @tolgee/ngx
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 {}
So you have to:
- Add
NgxTolgeeModule
to your import section - Add Factory provider for
TOLGEE_INSTANCE
token returning yourTolgee
instance.
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 or use Tolgee Content Delivery load localizations reliably.
Check Providing static data section.