Ngx-translate not translating anything

Question

I am in the process of internationalizing my current Angular 12 prototype application. Prototype means there is only the skeleton and a bunch of administrative features, and the developer(s) are in the process of coding vertical features in their working branch.

I have done the following, mostly following this tutorial

• Added the required dependencies in package.json

  "@ngx-translate/core": "^13.0.0",
  "@ngx-translate/http-loader": "^6.0.0",
  

  and devDependencies:

  "@biesbjerg/ngx-translate-extract": "^7.0.4",
  

• Set up AppModule (that's SharedModule in my case).

  The module is imported by AppModule anyway:

  import {NgModule} from '@angular/core';
  import {CommonModule} from '@angular/common';
  import {HTTP_INTERCEPTORS, HttpClient} from "@angular/common/http";
  import {DelayInterceptor} from "./interceptors/delay.interceptor";
  import {ConfirmationDialogComponent} from './dialogs/confirmation-dialog/confirmation-dialog.component';
  import {MaterialModule} from "./material.module";
  import {GenericErrorDisplayComponent} from './error/generic-error-display/generic-error-display.component';
  import {TranslateLoader, TranslateModule} from "@ngx-translate/core";
  import {TranslateHttpLoader} from "@ngx-translate/http-loader";
  
  
  @NgModule({
    declarations: [
      ConfirmationDialogComponent,
      GenericErrorDisplayComponent
    ],
    imports: [
      CommonModule,
      MaterialModule,
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
        }
      })
    ],
    providers: [
      {
        provide: HTTP_INTERCEPTORS,
        useClass: DelayInterceptor,
        multi: true
      },
    ],
    exports: [
      MaterialModule,
    ]
  })
  export class SharedModule {
  }
  
  // required for AOT compilation
  export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http);
  }
  

• Set up some translation strings.

  In some of my HTML files, I added translate directive, e.g.

  <button (click)=add() class="btn btn-success" id="btn-add" mat-button translate>Aggiungi Ruoli</button>
  

• Ran ngx-translate-extract

  "i18n:init": "ngx-translate-extract --input ./src --output ./src/assets/i18n/template.json --key-as-default-value --replace --format json",
  "i18n:extract": "ngx-translate-extract --input ./src --output ./src/assets/i18n/it.json --output ./src/assets/i18n/en.json --clean --format json",
  

  ngx-translate-extract populated some JSON files I had to amend

  en.json

  {
      "Permission": "Permission",
      "LegalEntity": "Legal Entity",
      "AML Type": "AML Type",
      "Indietro": "Back",
      "Salva": "Save",
      "Aggiungi Ruoli": "Add Roles",
      "ID": "ID",
      "Nome": "Name",
      "Data Creazione": "Created Date",
      "Data Modifica": "Modified Date",
      "Azioni": "Actions",
      "Aggiorna": "Refresh",
      "Nessun risultato trovato": "No result found",
      "Necessario eseguire login all'applicazione": "Application login is required"
  }
  
  

  Yes, that's a bunch of strings for now

• Set default language.

  Now I have set en as default language. In the AppComponent:

    constructor(
      private router: Router,
      private injector: Injector,
      private translate: TranslateService,
    ) {
       translate.setDefaultLang(environment.language); //this is equal to 'en'
    }
  

Running the application, I expected text to appear in English, but was still localized. I have checked the Network tab and, indeed, the English JSON file is loaded

But none of the stings is localized in English

The console shows no error.

What is wrong in this setup and what should I do next to display English text?

By using ngx-translate-extract, I am now using the third approach provided by the tutorial:

• translation directive — id as a child <element translate>id</element>

so everything should work fine.

Following the GitHub tutorial, I moved the TranslationModule.forRoot import from the SharedModule to the AppModule. Same result as before.

Answer 1

I fell into this trap, too, but finally figured it out.

A lot of angular elements create wrapper elements, so for example a:

<button translate>My message</button>

actually turns into

<button><span class="mat-button-wrapper">My message</span></button>

in which case the translation attribute lands on the wrong element.

I ended up having to do:

<button><span translate>My message</span></button>

to work around it.