ngx-translate 를 활용한 다국어 구현하기

angular에서 ngx-translate 를 활용한 다국어 구현하기를 설명 드립니다.
angular 16버전부터는 standalone 방식이 정식 서비스 되고 있으며 여기서는 각가의 방식에 대한 세팅법에 대해 간략 설명 드립니다.

install

npm i ngx-translate/core
npm i @ngx-translate/http-loader

i18n

i18n 폴더 에서는 아래와 같은 형식으로 json 파일을 만든다.

json 파일 명

[language].json
en.json
ko.json

json 파일 내용

{
  "setting": {
    "sound": "Sound",
    "version": "version",
    "vibration": "vibration"
  }
  ..........
}

standalone 방식

• app.config.ts

import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { TranslateLoader, provideTranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

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

export const appConfig: ApplicationConfig = {
  providers: [
    ..........
    provideHttpClient(withInterceptorsFromDi()),
    provideTranslateService({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient],
      },
      defaultLanguage: 'en', // Set the default language
    })
  ]
};

• component.ts

import { TranslateModule } from '@ngx-translate/core';
@Component({
  ..........
  imports:[TranslateModule],
})

NgModule 방식

• app.module.ts

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

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

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

• app.component.ts

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

export class AppComponent implements OnInit{
constructor(
    private translate: TranslateService,
  ) {

  }

  ngOnInit() {
    this.translate.setDefaultLang('en');
    const lan = navigator.language.split('-')[0]; // 브라우저의 세팅 랭귀지를 가져옮
    this.translate.use(lan);
    
  }

}

• html

{{ 'setting.version' | translate }}