콘텐츠로 바로 가기
Angular i18n

Angular i18n 솔루션

Angular 애플리케이션을 위한 Standalone 컴포넌트, Signals, SSR 지원.

Get started in 3 steps

1

Install

Add the Better i18n Angular package to your project.

terminal
npm install @better-i18n/angular
2

Import the module

Import BetterI18nModule in your AppModule or standalone component.

app.module.ts
import { BetterI18nModule } from '@better-i18n/angular';

@NgModule({
  imports: [
    BetterI18nModule.forRoot({
      project: 'your-org/your-project',
      defaultLocale: 'en',
    }),
  ],
})
export class AppModule {}
3

Use the translate pipe

Use the translate pipe or directive in your templates to display translations.

app.component.html
<h1>{{ 'welcome' | translate }}</h1>
<p>{{ 'greeting' | translate: { name: userName } }}</p>

기능

Standalone 컴포넌트 지원
번역 파이프
i18n 디렉티브
주입 가능한 서비스
지연 로딩 모듈
AOT 컴파일 지원
Angular Universal SSR
Signals 지원
Angular CLI 통합

빠른 시작

파이프와 서비스로 Angular 앱에 i18n을 추가하세요.

// app.component.ts
import { Component } from '@angular/core';
import { TranslateService } from '@better-i18n/angular';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ 'welcome' | translate }}</h1>
    <p>{{ 'greeting' | translate: { name: 'World' } }}</p>
  `
})
export class AppComponent {
  constructor(private translate: TranslateService) {
    translate.setDefaultLang('en');
  }
}

인기 있는 Angular i18n 라이브러리와 호환

Better i18n은 Angular i18n 라이브러리를 보완합니다 — 번역을 시각적으로 관리하고, 번역자와 협업하고, CDN을 통해 배포하세요.

Better i18n + @ngx-translate/core

가장 널리 사용되는 Angular 번역 라이브러리. 파이프, 디렉티브, 서비스 인젝션을 통한 런타임 번역.

Better i18n은 ngx-translate JSON 형식으로 내보냅니다. 대시보드에서 번역을 편집하고 레포지토리에 자동 동기화합니다.

Better i18n + Angular i18n (built-in)

AOT 컴파일, ICU 표현식, 빌드 타임 번역 추출을 갖춘 Angular의 공식 i18n 시스템.

Angular XLIFF 형식으로 내보내기. Better i18n이 번역 워크플로를 관리하고, Angular CLI가 로케일별 번들을 빌드합니다.

Better i18n + Transloco

지연 로딩, 풍부한 플러그인, 뛰어난 TypeScript 지원을 갖춘 Angular용 현대적이고 가벼운 i18n 라이브러리.

Better i18n의 GitHub 연동으로 Transloco JSON 형식에 번역을 동기화합니다. CDN 배포를 통한 실시간 업데이트.

Angular i18n으로 개발을 시작하세요

무료 플랜 제공. 신용카드가 필요 없습니다.