애플리케이션에 번역 병합하기

완성된 번역을 프로젝트에 병합하려면 다음 단계를 진행하세요.

1. Angular CLI로 프로젝트의 배포 파일 사본을 빌드합니다.
2. "localize" 옵션을 사용해 모든 i18n 메시지를 유효한 번역으로 교체하고 현지화된 애플리케이션 버전을 빌드합니다. 현지화된 애플리케이션 버전은 하나의 지역에 맞게 번역된 애플리케이션 배포 파일의 완전한 사본입니다.

번역을 병합한 후에는 서버 측 언어 감지 기능이나 서로 다른 하위 디렉터리를 사용해 각 애플리케이션 배포 사본을 제공하세요.

애플리케이션을 컴파일 시점에 번역할 때는 빌드 과정에서 AOT(ahead-of-time) 컴파일을 사용해 크기가 작고 빠르며 바로 실행할 수 있는 애플리케이션을 생성합니다.

각 지역의 애플리케이션 배포 사본을 개별적으로 빌드하려면 프로젝트의 angular.json 작업 공간 빌드 설정 파일에서 빌드 설정에 지역을 정의하세요.

이 방법을 사용하면 지역마다 애플리케이션 전체를 빌드할 필요가 없어 빌드 시간이 줄어듭니다.

지역별 애플리케이션 버전을 생성하려면 angular.json 작업 공간 빌드 설정 파일의 "localize" 옵션을 사용하세요. 또한 명령줄에서 빌드하려면 Angular CLI의 build 명령에 --localize 옵션을 사용하세요.

빌드 설정에 지역 정의하기

프로젝트의 angular.json 작업 공간 빌드 설정 파일에서 i18n 프로젝트 옵션으로 지역을 정의하세요.

다음 하위 옵션은 원본 언어를 식별하고, 프로젝트에서 지원하는 번역의 위치를 컴파일러에 알려줍니다.

i18n 프로퍼티와 타입의 전체 목록은 i18n 옵션을 참고하세요.

en-US와 fr의 angular.json 예제

예를 들어 다음 angular.json 작업 공간 빌드 설정 파일의 일부에서는 원본 지역을 en-US로 설정하고 프랑스어(fr) 지역 번역 파일의 경로를 지정합니다.

"projects": {
    "angular.io-example": {
      // ...
      "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "fr": {
            "translation": "src/locale/messages.fr.xlf",
            // ...
          }
        }
      },
      "architect": {
        // ...
      }
    }
  }
}

지역별 애플리케이션 버전 생성하기

빌드 설정에서 정의한 지역을 사용하려면 angular.json 작업 공간 빌드 설정 파일의 "localize" 옵션으로 해당 빌드 설정에서 생성할 지역을 CLI에 알려주세요.

• 빌드 설정에 정의한 모든 지역을 사용하려면 "localize"를 true로 설정합니다.
• 정의한 지역 중 일부만 빌드하려면 해당 지역 식별자를 배열에 담아 "localize"에 지정합니다.
• 현지화를 비활성화하고 지역별 버전을 생성하지 않으려면 "localize"를 false로 설정합니다.

이 설정을 변경한 적이 있다면 AOT를 사용할 수 있도록 "aot"를 true로 설정하세요.

CLI는 지역 데이터를 불러오고 등록한 후, 생성된 각 버전을 다른 지역 버전과 구분하기 위해 지역별 디렉터리에 배치합니다. 이 디렉터리들은 프로젝트에 설정된 outputPath 안에 생성됩니다. 각 애플리케이션 버전의 html 엘리먼트에서 lang 어트리뷰트는 해당 지역으로 설정됩니다. CLI는 설정된 baseHref에 지역을 추가해 각 애플리케이션 버전의 HTML 기준 HREF도 조정합니다.

모든 설정에서 상속받을 수 있도록 "localize" 프로퍼티를 공통 설정에 지정하세요. 다른 설정을 재정의하도록 이 프로퍼티를 지정할 수도 있습니다.

angular.json에서 모든 지역을 빌드에 포함하는 예제

다음 예제는 빌드 설정에 정의한 모든 지역을 빌드하도록 angular.json 작업 공간 빌드 설정 파일의 "localize" 옵션을 true로 설정한 모습입니다.

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "localize": true,
    // ...
  },

명령줄에서 빌드하기

기존 production 설정으로 ng build 명령을 실행할 때 --localize 옵션을 사용할 수도 있습니다. CLI는 빌드 설정에 정의한 모든 지역을 빌드합니다. 빌드 설정에 지역을 지정했다면 "localize" 옵션을 true로 설정한 것과 같은 방식으로 동작합니다.

ng build --localize

특정 지역에만 빌드 옵션 적용하기

하나의 지역에만 특정 빌드 옵션을 적용하려면 해당 지역 하나를 지정해 지역 전용 커스텀 설정을 만드세요.

프랑스어 빌드 예제

다음 예제는 하나의 지역을 사용하는 지역 전용 커스텀 설정을 보여줍니다.

"build": {
    // ...
    "configurations": {
      // ...
      "fr": {
        "localize": ["fr"]
      }
    },
    // ...
  },
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "configurations": {
      // ...
      "fr": {
        "buildTarget": "angular.io-example:build:development,fr"
      }
    },
    // ...
  },
  // ...
}

이 설정을 ng serve나 ng build 명령에 전달하세요. 다음 코드 예제는 프랑스어 파일을 제공하는 방법을 보여줍니다.

ng serve --configuration=fr

프로덕션 빌드에서는 설정을 조합해 두 설정을 모두 적용하세요.

ng build --configuration=production,fr

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      // ...
    },
    "configurations": {
      // ...
      "fr": {
        "localize": ["fr"]
      }
    },
    // ...
  },
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "configurations": {
      "production": {
        "buildTarget": "angular.io-example:build:production"
      },
      // ...
      "fr": {
        "buildTarget": "angular.io-example:build:development,fr"
      }
    },
    // ...
  },
  // ...
}

누락된 번역 보고하기

번역이 누락되면 빌드는 성공하지만 Missing translation for message "{translation_text}"와 같은 경고가 발생합니다. Angular 컴파일러가 생성하는 경고 수준을 설정하려면 다음 수준 중 하나를 지정하세요.

angular.json 작업 공간 빌드 설정 파일의 build 대상에 있는 options 섹션에서 경고 수준을 지정하세요.

angular.json의 error 경고 예제

다음 예제는 경고 수준을 error로 설정하는 방법을 보여줍니다.

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    // ...
    "i18nMissingTranslation": "error"
  },

Angular 애플리케이션을 번역할 때 번역 변환 과정은 템플릿 리터럴 문자열의 구성 요소(정적 문자열과 표현식)를 번역 모음의 문자열로 교체하고 순서를 재배치합니다. 자세한 내용은 $localize를 참고하세요.

다음 단계