Installation
To use Tolgee in your Angular application, you need to follow these steps:
- Install the Tolgee integration library
- Configure the Tolgee API
- Set up the environment variables
- Preparing for production
Install the Tolgee integration library
To install Tolgee integration library, run the following command:
- npm
- yarn
- pnpm
npm install @tolgee/ngx
yarn add @tolgee/ngx
pnpm 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:
- 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.
You can also check the Angular example application to learn more.