Angular

Integrate i1n with Angular using the i1n SDK or Bridge Mode with ngx-translate.

Setup

Run i1n init in your Angular project. The CLI auto-detects @ngx-translate/core if present and configures JSON format.

Translation files are stored in the locales/ directory, compatible with ngx-translate's HttpLoader.

Standalone Mode

Import init and t from i1n and use them directly in your Angular services and components. The i1n SDK works as a lightweight alternative to ngx-translate.

Provide t() via an Angular service for dependency injection, or call it directly in component templates.

Bridge Mode with ngx-translate

If your project uses ngx-translate, connect it with: registerI1n((key, params) => translateService.instant(key, params)). The i1n t() function delegates to ngx-translate while providing type-safe autocomplete.

i1n manages the translation files and type generation. ngx-translate continues to handle runtime loading, the translate pipe, and the TranslateService. Your existing templates remain unchanged.

Deployment

Add i1n pull to your build step. The generated translation files are compatible with ngx-translate's expected format.

For large applications, organize translations by feature module using namespace files.

src/app/app.component.ts

import { TranslateService } from '@ngx-translate/core';

@Component({
  template: '<h1>{{ "welcome" | translate }}</h1>'
})
export class AppComponent {
  constructor(private translate: TranslateService) {}
}

Bridge Mode — app.module.ts

import { registerI1n } from 'i1n'
import { TranslateService } from '@ngx-translate/core'

// In your AppComponent constructor:
registerI1n((key, params) => this.translate.instant(key, params))

Dashboard

Guide to the i1n web dashboard: account creation, organizations, API keys, translation editing, and team management.

Bridge Mode

Keep your existing i18n library while adding i1n's type-safe autocomplete, AI translation, and file management.