Installation (Angular)
Check our Angular example application
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 {}
Check all tolgee options and tolgee plugins.
So you have to:
- Add
NgxTolgeeModule
to your import section - Add Factory provider for
TOLGEE_INSTANCE
token returning yourTolgee
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.