ngx-translate Documentation

To create a completely independent translation service that does not connect to any parent or inherit translations, use provideTranslateService() within a component's providers array. This creates a standalone store that is isolated from the application root.

@Component({
  providers: [
    provideTranslateService({
      lang: "de",
      loader: provideTranslateHttpLoader({ prefix: "./feature-i18n/" })
    })
  ]
})
export class FeatureComponent {}

The module-based API (TranslateModule.forRoot() and forChild()) is removed. Use the new provider functions in your providers array for both standalone and module-based applications.

For detailed implementation guides and deep dives, refer to the following resources:

• Official Documentation: https://ngx-translate.org/
• Getting Started Tutorial: How to Translate Your Angular App with NGX-Translate

For modern Angular applications (versions 16 through 21), use the official documentation at ngx-translate.org. The documentation includes installation guides, interface definitions, and instructions for developing custom plugins.

If you are upgrading from a previous version, refer to the specific migration guides:

• Migration guide v17 -> v18
• Migration guide v16 -> v17

A step-by-step tutorial for translating an Angular app can be found at Codeandweb's tutorial.

To create a service that participates in a translation hierarchy, use provideChildTranslateService() within a component's providers array. This allows translation lookups to bubble up through the component tree. Language changes (like calling use()) on a child will be delegated to the parent, ensuring all connected services share the same language state.

// feature.component.ts - connected to root
@Component({
  providers: [
    provideChildTranslateService({
      loader: provideTranslateHttpLoader({ prefix: "./feature-i18n/" })
    })
  ]
})
export class FeatureComponent {}

// nested.component.ts - connected to feature
@Component({
  providers: [
    provideChildTranslateService({
      loader: provideTranslateHttpLoader({ prefix: "./nested-i18n/" })
    })
  ]
})
export class NestedComponent {}

Use provideTranslateHttpLoader to set up an HTTP-based translation loader. This function can be used in two ways:

1. Single Resource Mode: Provide a prefix and suffix to load a single translation file (defaults to /assets/i18n/ and .json).
2. Multi-Resource Mode: Provide a resources array to load translations from multiple paths or specific resource configurations.

Common configuration options include:

• enforceLoading: If true, appends a timestamp cache-buster to requests.
• useHttpBackend: If true, uses HttpBackend instead of HttpClient to bypass interceptors.
• failOnError: If true, a failed HTTP fetch (e.g., 404) propagates the error and fails the whole language load. If false (default), failed resources are replaced with an empty object and a warning is logged.

To set up ngx-translate in an Angular application, use the provider functions exported from @ngx-translate/core. These functions allow you to configure the core service, child services, loaders, compilers, parsers, and missing translation handlers.

Available provider functions:

• provideTranslateService
• provideChildTranslateService
• provideTranslateLoader
• provideTranslateCompiler
• provideTranslateParser
• provideMissingTranslationHandler

Use provideChildTranslateService to create a localized translation scope for a specific component tree. This allows for different loaders, compilers, or parsers within a sub-section of your application. It accepts a ChildTranslateServiceConfig which is a partial version of the root configuration (it does not support fallbackLang or lang directly in the same way as the root).

Available configuration options:

• loader: A custom TranslateLoader.
• compiler: A custom TranslateCompiler.
• parser: A custom TranslateParser.
• missingTranslationHandler: A custom MissingTranslationHandler.