Что использовать для интернационализации Angular?

Для интернационализации в Angular следует использовать модуль @angular/localize, который предоставляет различные инструменты и функциональность для эффективного перевода и локализации веб-приложений.

Основной инструмент для интернационализации в Angular - это ngx-translate. Это пакет, который позволяет управлять переводами в приложении с помощью простых функций и директив. Он предоставляет возможность определения переводов для различных языков и использование этих переводов на страницах приложения.

ngx-translate также позволяет с легкостью изменять язык в приложении. Он автоматически заменяет текст на нужный перевод, опираясь на указанный язык. Кроме того, ngx-translate поддерживает параметризацию переводов, что позволяет создавать динамические переводы, в которых значения могут быть изменены в зависимости от контекста.

Для использования ngx-translate в Angular, нужно сначала установить пакет командой:

npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save

Затем, следует импортировать и добавить модуль TranslateModule.forRoot() в корневой модуль вашего приложения:

import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function HttpLoaderFactory(httpClient: HttpClient) {
    return new TranslateHttpLoader(httpClient, './assets/i18n/', '.json');
}

@NgModule({
  imports: [
    ...,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  ...
})
export class AppModule { }

Далее, нужно создать папку i18n в папке assets вашего проекта и поместить туда файлы переводов в формате JSON, например en.json, fr.json, и т.д. В файле перевода нужно указать ключевые фразы и их переводы для каждого языка:

{
   "hello": "Hello",
   "welcome": "Welcome to my app"
}

Теперь можно использовать функции и директивы ngx-translate в шаблонах вашего приложения. Например, для перевода текста можно использовать функцию translate:

<h1>{{ 'hello' | translate }}</h1>
<p>{{ 'welcome' | translate }}</p>

Если же нужно перевести текст в коде компонента, можно использовать сервис TranslateService:

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

@Component({
   ...
})
export class MyComponent {
   constructor(private translate: TranslateService) {}

   ngOnInit() {
      // Установить язык по умолчанию
      this.translate.setDefaultLang('en');

      // Использовать язык браузера, если он поддерживается
      this.translate.use(this.translate.getBrowserLang());
   }

   changeLanguage(lang: string) {
      // Сменить язык
      this.translate.use(lang);
   }
}

ngx-translate также предоставляет множество других возможностей, включая интерполяцию переменных в переводах, форматирование дат и чисел в соответствии с локализацией, а также возможность динамически обновлять переводы без перезагрузки страницы. Этот пакет позволяет обеспечить профессиональное и гибкое решение для интернационализации вашего Angular приложения.