ngx-translate 라이브러리를 이용해서 Angular 애플리케이션에 다국어 변환 기능을 적용하는 방법을 정리한다.
Angular는 자체 i18n(Internationalization) 기능을 지원하는데 사용하려고 찾아본 결과 설정이 복잡하고 언어 별로 프로젝트가 따로 빌드되어 사용하지 않는다는 글들이 많았다. 그래서 ngx-translate 라이브러리를 사용해 다국어를 적용했다.
ngx-translate 설치 및 사용법
ngx-translate 공식 문서 에도 설명이 굉장히 잘 되어있다.
-
가장 먼저 npm 모듈을 설치해야 한다.
npm install @ngx-translate/core --save -
설치가 완료되었다면 최상위 모듈인
AppModule에TranslateModule을 import 한다. 이 때forRoot로 적용한다. Shared Module이나 Lazy Loaded Module에서 import할 경우 위의 공식 문서에서 방법을 확인할 수 있다.import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; import {TranslateModule} from '@ngx-translate/core'; @NgModule({ imports: [ BrowserModule, TranslateModule.forRoot() ], bootstrap: [AppComponent] }) export class AppModule { } -
이제 loader 설정하기 위해 http-loader 패키지를 설치한다.
npm install @ngx-translate/http-loader --save -
loader를 설정해준다. 기본 언어를 한국어로 하기 위해 'ko'로 설정했다.
import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; import {TranslateLoader, TranslateModule} from '@ngx-translate/core'; import {HttpClient, HttpClientModule} from '@angular/common/http'; import {TranslateHttpLoader} from '@ngx-translate/http-loader'; export function createTranslateLoader(http: HttpClient) { return new TranslateHttpLoader(http, './assets/i18n/', '.json'); } @NgModule({ imports: [ BrowserModule, HttpClientModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: (createTranslateLoader), deps: [HttpClient] }, defaultLanguage: 'ko' }), ], bootstrap: [AppComponent] }) export class AppModule { }이 때
createTranslateLoader(http: HttpClient)함수에서 리턴하는 로더의 인자로 전달되는 경로에 번역을 위한 파일을 생성해야 한다. (이 json 파일을 참고해 각각 키를 매핑된 값으로 바꿔주는 방식으로 translate가 동작하기 때문)
경로가./assets/i18n/*.json이므로 아래와 같은 경로에en.json과ko.json파일을 생성해둔다.
일단 생성만 해두고 다음으로 넘어간다.주의할 점
- HttpClient를 사용하기 위해서는 HttpClientModule을 import 해줘야 한다!
- 한국어는 'ko'이다. ('kr' 아님!!)
-
AppComponent에TranslateService를 주입하고 초기화해준다.import {Component} from '@angular/core'; import {TranslateService} from '@ngx-translate/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { constructor(private translate: TranslateService) { translate.setDefaultLang('ko'); translate.use('ko'); } }translate.use()를 사용하면 해당 언어로 translate가 활성화된다.
여기까지 했으면 설정은 끝났고, ngx-translate가 번역할 문자열들을 key로 대체하고translate파이프를 사용하여 템플릿을 수정한다. -
템플릿 수정
(수정 전)<div> <h1>게시판</h1> <button>글쓰기</button> <button>로그인</button> <button>관리자</button> </div>(수정 후)
<div> <h1>{{ 'board' | translate }}</h1> <button>{{ 'write' | translate }}</button> <button>{{ 'login' | translate }}</button> <button>{{ 'admin' | translate }}</button> </div>번역하고 싶은 단어들을 임의의 key로 대체하고
translatepipe를 적용한다.
{{ 'key' | translate }}형식으로 템플릿을 모두 수정한 후ngx-translate-extract를 사용해 템플릿에 적용된 키를 json 파일로 추출할 것이다.
ngx-translate-extract 설치 및 사용법
-
ngx-translate-extract를 설치한다.npm install @biesbjerg/ngx-translate-extract --save-dev -
package.json에서 script를 설정해준다."scripts": { ... "extract-translations": "ngx-translate-extract --input ./src --output ./src/assets/i18n/*.json --clean --sort --format namespaced-json --marker _" }, -
위에서 템플릿에 key를 수정해놓은 상태라면
npm run extract-translations명령어를 실행하면 위에서 설정한 경로./src/assets/i18n/*.json에 각 key가 정리되어 들어간다!npm run extract-translations실행 결과
./src/assets/i18n/*.json파일에 템플릿의 key 값들이 추출되어있는 것을 확인할 수 있다.
이제 ko.json, en.json에 맞게 대치할 단어를 빈 값에 넣어주면 된다.
ko.json
{
"admin": "관리자",
"board": "게시판",
"login": "로그인",
"write": "글쓰기"
}
en.json
{
"admin": "Admin",
"board": "Board",
"login": "Loagin",
"write": "Write"
}
Translate 모드 바꾸기
키값에 대치할 단어를 모두 작성했다면 알맞은 위치와 상황에서 언어를 바꿔주면 된다. 보통은 버튼을 클릭할 때 이벤트 핸들러에서 변경을 처리할 것이다.
위에 AppComponent에서 TranslateService를 주입받아 언어 사용 설정을 했던 것과 똑같이 하면 된다.
<button value="kr" (click)="switchLanguage('ko')">KR</button>
<button value="en" (click)="switchLanguage('en')">EN</button>import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
@Component({
selector: 'app-some-component',
templateUrl: './app-some-component.component.html',
styleUrls: ['./app-some-component.component.scss']
})
export class SomeComponent {
constructor(private translate: TranslateService) {
}
public switchLanguage(lang: string) {
this.translate.use(lang);
}
}
[Reference]
