[Angular] ngx-translate를 이용한 다국어 처리

 

 

❗️Problem

진행하던 프로젝트가 어느정도 개발이 되어가면서 다국어 처리를 해줘야했다.

⚠️ Angular Internationalization (i18n)

기존에 Angular에서 다국어 처리는 Internationalization (i18n) 기능을 지원하고 있었는데, 아쉽게도 한국어가 없고 적용 과정이 복잡했다. (참고 : https://angular.kr/guide/i18n)

불러오는 중입니다...

 

 

✅ ngx-translate

그래서 두 번째로 찾아본 모듈이 바로 'ngx-translate' 이다.

(참고: https://github.com/ngx-translate/core)

ngx-translate/core

 

적용 방법도 쉽고, 여러 컴포넌트로 나눠서 개발하고 있는 프로젝트에 적합했다.

 

 

 

⭐️ 사용 방법

1. 모듈 설치

> npm install @ngx-translate/core --save 

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

 

 

2. app.module.ts 에 추가

@NgModule({
declarations: [AppComponent, ... 이외에 사용하는 여러 컴포넌트들],
imports: [
    BrowserModule,
    ReactiveFormsModule,
    ... 

    TranslateModule.forRoot({
        useDefaultLang: true,
        defaultLanguage: 'ko',
        loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
        }
    })
],
    bootstrap: [AppComponent]
})

 

export class AppModule {
}

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

 

 

3. 언어 별 json 파일 생성

파일은 프로젝트 내 assets 폴더 아래에 만들었다. 파일 경로를 위 HttpLoaderFactory func 안에 넣어준다.

파일 내부는 아래와 같다.

 

{
    "btn": {
        "create": "추가",
        "update": "수정",
        "save": "저장",
        "cancel": "취소",
        "delete": "삭제"
    },
    "placeholder": {
        "search-menu": "메뉴 검색"
    }
}

 

 

 

4. component 에서 translate 사용하기

 

component.html 파일의 경우, 별도로 translate를 선언해줄 필요 없이 바로 사용 가능하다.

<li (click)="edit()">{{ 'btn.update' | translate }}</li>

 

component.ts 파일의 경우, 아래와 같이 사용하면 된다.

 

constructor(private translate: TranslateService) {
     ...
}

 

this.translate.get('btn.create').subscribe((res: string) => {
    console.log(res);
});

 

 

 

 

 

참고 사이트

https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular8-app-with-ngx-translate

How to translate your Angular 8 app with ngx-translate