How to handle missing translations

You can set up a provider for the MissingTranslationHandler in the bootstrap of your application (recommended), or in the providers property of a component. It will be called when your requested translation is not available. The only required method is handle where you can do whatever you want. If this method returns a value or an observable (that should return a string), then this will be used.

You can use the fallbackLang configuration to decide whether fallback language string should be used when there is a missing translation in current language. If no fallback language is set, MissingTranslationHandler will be used instead.

Building a Custom Handler

To implement your own handler, create a class that extends the MissingTranslationHandler abstract class and overrides the handle() method.

Here’s an example of a custom handler that logs missing translations and returns a formatted message:

import { Injectable } from '@angular/core';
import { MissingTranslationHandler, MissingTranslationHandlerParams } from '@ngx-translate/core';

@Injectable()
export class MyMissingTranslationHandler extends MissingTranslationHandler {
  handle(params: MissingTranslationHandlerParams): string {
    // Log the missing translation for debugging
    console.warn(`Missing translation for key: ${params.key}`);

    // Return a formatted message instead of just the key
    return `[MISSING: ${params.key}]`;
  }
}

Registering a Custom Handler

We recommend using the provideMissingTranslationHandler() function within provideTranslateService() in v18:

import {provideTranslateService, provideMissingTranslationHandler} from "@ngx-translate/core";
import {MyMissingTranslationHandler} from './my-missing-translation-handler';

export const appConfig: ApplicationConfig = {
    providers: [
        ...
        provideTranslateService({
            missingTranslationHandler:
                    provideMissingTranslationHandler(MyMissingTranslationHandler),
        })
    ],
};

Handlers that need runtime dependencies

Use the factory form of provideMissingTranslationHandler() with inject():

import { inject } from "@angular/core";
import {
    provideTranslateService,
    provideMissingTranslationHandler,
} from "@ngx-translate/core";
import { LoggingService } from "./logging.service";
import { MyMissingTranslationHandler } from "./my-missing-translation-handler";

export const appConfig: ApplicationConfig = {
    providers: [
        provideTranslateService({
            missingTranslationHandler: provideMissingTranslationHandler(
                () => new MyMissingTranslationHandler(inject(LoggingService)),
            ),
            fallbackLang: "en",
        }),
    ],
};