Angular에 다국어 적용

2017-12-06

깃플에서 Angular에 다국어를 지원을 위해 적용한 방법을 소개합니다.

Angular에서는 자체적으로 다국어를 지원하는 i18n을 제공합니다.(Angular Internationalization)
그러나 다음의 이유로 기본제공 i18n을 사용하지 않고 ngx-translate 라이브러리를 사용합니다.

Angular는 한번에 하나의 언어만 동작하고 언어를 변경할 경우 다시 로드해야 하지만 ngx-translate에서는 언제든지 다시 로드하지 않고 변경가능합니다. 이로인해서 메모리를 더 차지하는 단점이 있습니다.
Angular는 탬플릿에서만 i18n을 지원하지만 ngx-translate에서는 코드와 템플릿 두 가지 형태를 모두 지원합니다.
Angular에서는 다국어 파일을 XLIFF 또는 XMB의 XML 형식만 지원하지만 ngx-translate에서는 기본적으로 JSON을 지원하고 추가로 자체 로더를 작성해서 다른 형태(PO 파일)도 지원 가능합니다.

그래서 깃플에서는 ngx-transalte를 사용하고 있습니다. 이 라이브러는 주요 Contributor로 Angular의 i18n 팀의 개발자가 포함 되어 있어서 Angular에 적합한 구조로 만들어지고 있는 장점도 있습니다.

설치

ngx-transalte에 설치에는 core 모듈과 다국어 파일 로딩을 위한 http-loader 모듈 두 가지를 설치합니다.

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

설정

아래 예제는 깃플 서비스에서 Angular AoT 빌드를 위한 설정입니다. 다른 방법으로 적용할 경우는 공식 문서를 참고하세요

translate 모듈을 로딩과 초기 언어를 설정하고 다국어 파일을 만들어 주면 바로 사용가능하게 됩니다. 다국어 파일은 json 형태로 사용합니다.

Angular 4.3 이상의 버전을 사용할 경우는 @angular/http에서 Http가 변경되었습니다. 대신에 HttpClient 사용하세요.

Import TranslateModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule, Http } from '@angular/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app';

export function createTranslateLoader(http: Http) {
  // 다국어 파일의 확장자와 경로를 지정
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
      }
    })
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

TranslateService 초기화

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

@Component({
    selector: 'app',
    template: `
        <div>{{ 'HELLO' | translate:param }}</div>
    `
})
export class AppComponent {
    param = {value: 'world'};

    constructor(translate: TranslateService) {
        // 현재 사용 언어에서 해당하는 다국어 설정이 없을 경우 기본 사용하는 언어 설정
        translate.setDefaultLang('ko');

         // 현재 사용 언어 설정
        translate.use('ko');
    }
}

다국어 파일 생성

다국어 파일 이름은 ko.json, en.json… 등으로 만들면 됩니다.

{
    "HOME": {
        "HELLO": "hello {{value}}"
    }
}

사용법

다국어를 사용을 위해서는 TranslateService, TranslatePipe, TranslateDirective의 다양한 방법으로 적용이 가능합니다.

TranslateService: 코드에서 사용

get(key, interpolateParams) 함수에서 직접 다국어 값을 가져올 수 있습니다. (API 상세 문서)

translate.get('HELLO', {value: 'world'}).subscribe((res: string) => {
    console.log(res);
    //=> 'hello world'
});

TranslatePipe: 템플릿에서 pipe 사용

pipe를 사용하여서 템플릿에서 적용이 가능합니다. 다음 예제에서 param은 다국어 파일에 {{ "{{ value " }}}} 형식으로 변수를 지정해서 변경된 값을 출력하는 방법입니다.
param은 코드에서 param = {value: 'world'}; 형태로 지정하면 됩니다.

1	<div>{{ 'HELLO' \| translate:param }}</div>

TranslateDirective: directive를 사용

1
2
3

<div [translate]="'HELLO'" [translateParams]="{value: 'world'}"></div>

<div translate [translateParams]="{value: 'world'}">HELLO</div>

다국어 파일에서 HTML사용

번역 파일에서 직접 HTML을 추가하고 innerHTML을 통해서 적용 가능합니다.

/* 다국어 JSON 파일 */
{
    "HELLO": "Welcome to my Angular application!<br><strong>This is an amazing app which uses the latest technologies!</strong>"
}

<!-- 템플리에서 적용 -->
<div [innerHTML]="'HELLO' | translate"></div>

마치면서…

다국어를 서비스에 적용한 방법을 간단하게 작성했지만 ngx-traslate 공식 문서에서는 Shared Module에 적용한는 방법, AoT 적용방법등이 잘 설명되어 있고 여러가지 활용 가능한 API들이 잘 설명되어 있어서 쉽게 활용 가능할 수 있습니다.

BlogDev

설치

설정

사용법

마치면서…