Angular internalization (multi‐language) - dialloi659/angular GitHub Wiki

1. Install @ngx-translate/core and @ngx-translate/http-loader packages
2. Const and Enums

export enum Language {
  FR = 'fr',
  EN = 'en'
}

1. Add i18n translation files in assets folder (assets/i18n/)

FR: fr.json

{
  "language": {
    "fr": "Français",
    "en": "Anglais"
  },
  "page": {
    "login": {
      "usernameLabel": "Votre email",
      "passwordLabel": "Votre mot de passe",
      "forgotPasswordText": "Mot de passe oublié ?",
      "submitLoginButton": "Connexion"
    }
}

EN: en.json

{
  "language": {
    "fr": "French",
    "en": "English"
  },
  "page": {
    "login": {
      "usernameLabel": "Your email",
      "passwordLabel": "Your password",
      "forgotPasswordText": "Forgot your password ?",
      "submitLoginButton": "Login"
    }
}

export const SESIION_LANG_KEY = "language";

1. Add configure to app.config.ts

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { RouterOutlet, provideRouter } from '@angular/router';
import {
  BrowserAnimationsModule,
  provideAnimations,
} from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { TranslateLoader, TranslateModule } from "@ngx-translate/core";
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { Language } from './components/shared/enums/language.enum';

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient);
}

export const provideTranslation = () => ({
  defaultLanguage: Language.FR,
  loader: {
    provide: TranslateLoader,
    useFactory: HttpLoaderFactory,
    deps: [HttpClient],
  },
});

export function tokenGetter() {
  return localStorage.getItem("access_token");
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(App_Route),
    RouterOutlet,
    provideAnimations(),
    provideHttpClient(withInterceptorsFromDi()),
    importProvidersFrom(
      TranslateModule.forRoot(provideTranslation())
    ),
  ],
};

1. Use translation and set default language from app component

import { TranslateService } from '@ngx-translate/core';
import { Language } from './components/shared/enums/language.enum';
import { SESIION_LANG_KEY } from './components/shared/constantes/storage.const';
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
  animations: [],
})
export class AppComponent {

  private readonly translateService = inject(TranslateService);
  ngOnInit() {
      this.initLanguage();
  }

  private initLanguage(): void {
    let lang = '';
    const sessionLang = sessionStorage.getItem(SESIION_LANG_KEY);
    if (sessionLang) {
      lang = sessionLang;
    } else {
      lang =
        this.translateService.getBrowserLang() ??
        this.translateService.getDefaultLang();
    }
    this.translateService.use(lang);
  }
}