Angular i18n 및 Angular Universal을 사용하는 서버측 렌더링: 섹션 1

국제화는 현재 대부분의 현대 응용 프로그램의 수요이다.만약 응용 프로그램이 Angular에서 개발된다면, 다양한 사용 가능한 라이브러리가 있습니다. 이 라이브러리를 사용하여 여러 지역에서 응용 프로그램을 보여주고, 세계 각지의 사용자와 연락할 수 있습니다.
Angular는 동일한 기능을 제공하는 모듈을 제공합니다.그러나 이 목적에 사용할 수 있는 다른 라이브러리에 비해 복잡합니다. 응용 프로그램과 통합할 수 있습니다.
여기서 Angular i18n을 사용하는 방법을 학습한 다음 다른 전략보다 우수한 이유를 설명하겠습니다.
Angular CLI 를 사용하여 다음 명령 실행

ng add @angular/localize

이렇게 하면 프로젝트에서 Angular의 현지화를 사용할 수 있습니다.
다음은 번역을 위해 템플릿 파일에 정적 텍스트를 표시합니다.

<p i18n >Welcome to Angular Internationalization!</p>  

i18n 속성을 임의의 요소의 임의의 속성과 함께 사용함으로써 번역에 원소 속성을 표시합니다.i18n attribute = "means | description@"구문을 사용하여 의미, 설명 및 사용자 정의 ID를 지정할 수도 있습니다.
다음은 같은 예다.

<input  type="password" i18n-placeholder ="passwordPlaceholder|Placeholder for Password@@001"  placeholder="password" name="password" /> 

의미, 설명 및 Id는 선택 사항이며, 언급하지 않으면 Angular에서 자동으로 Id를 생성합니다.
Angular는 로케일에 따라 데이터를 포맷하는 LOCALE ID 태그를 사용하는 데이터 변환 파이핑을 제공합니다.

DatePipe: 날짜 값의 형식을 설정합니다.

CurrencyPipe: 숫자를 통화 문자열로 변환합니다.

DecimalPipe: 숫자를 10진수 문자열로 변환합니다.

PercentPipe: 숫자를 백분율 문자열로 변환합니다.

LOCALE ID의 값을 덮어쓰려면 {{amount | currency : 'en-US'}}과 같은 LOCALE 매개변수를 추가합니다.
사용 가능한 지역 목록은 this. 참조
현재, 우리는 이미 번역 템플릿을 준비했으니, 우리는 그것을 계속 처리할 수 있다.

소스 언어 파일 추출
Angular CLI 에서 다음 명령을 실행합니다.

ng xi18n  

이것은 메시지라는 원본 언어 파일을 만들 것입니다.xlf는 프로젝트의 루트 디렉터리에 있습니다.
xi18n 명령은 세 가지 번역 형식의 파일을 읽고 쓸 수 있습니다.

XLIFF 1.2(기본값)

XLIFF 2

XML 메시지 팩(XMB)

--format 명령 옵션을 사용하여 번역 형식을 명시적으로 지정할 수 있습니다.
이 정보들.xlf는 다음과 같다.번역 단원이 있고 Id가 생성되어 있음을 주의하십시오.파일 위치와 줄 번호 같은 다른 메타데이터도 포착한다.

<trans-unit id="7d1069de6c435fab320e5305cbaf139af1b0189f" datatype="html">
        <source>Welcome!</source>
        <context-group purpose="location">
        <context context-type="sourcefile">app/login/login.component.html</context>
          <context context-type="linenumber">23</context>
        </context-group>
      </trans-unit>

메시지를 복사합니다.xlf 파일을 만들고 이름을 바꿉니다.예를 들어 메시지 이름을 바꿀 수 있습니다.pa.xlf는 방차포어를 나타낸다.
다음 코드 세션에 원본 언어의 텍스트를 번역하는 데 사용할 추가 목표 표시가 있음을 주의하십시오.

<trans-unit id="7d1069de6c435fab320e5305cbaf139af1b0189f" datatype="html">
        <source>Welcome!</source>
        <target> ਜੀ ਆਇਆਂ ਨੂੰ !</target>
        <context-group purpose="location">
        <context context-type="sourcefile">app/login/login.component.html</context>
          <context context-type="linenumber">23</context>
        </context-group>
      </trans-unit>

마찬가지로 모든 메시지의 모든 번역 단원에 목표 표시를 추가합니다.lang.xlf 파일, 응용 프로그램이 지원할 수 있는 언어 수입니다.

구성에서 로케일 정의
각도에서.json,build 설정에서 모든 언어 환경에 대한 설정을 정의합니다.en-US은 영어의 Locale ID이며, 기타 언어는 here을 참조하십시오.

"en-US": {
              "outputPath": "dist/browser/en",
              "baseHref": "/en/",
              "i18nLocale": "en-US",
              "i18nFormat": "xlf",
              "i18nFile": "src/messages.xlf",
              "i18nMissingTranslation": "error",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },    

outputPath은 프로젝트 루트 디렉토리의 경로를 나타냅니다.
실행되면 이 구축은 어디에서 생성됩니까?Angular i18n은 기본적으로 aot을 지원합니다.baseHref은 로케일을 탑재한 사이트의ref를 나타낸다.
마찬가지로 각도 아래.json의 서비스 설정은 모든 언어 환경에 대한 서비스 설정을 정의합니다.이 production은 기본값을, en-US은 영어로 제공되는 애플리케이션을 나타냅니다.응용 프로그램이 지원하는 모든 지역을 포함해야 합니다.demoproject은 이곳의 프로젝트 명칭이다.

"production": {
              "browserTarget": "demoproject:build:production"
            },
            "en-US": {
              "browserTarget": "demoproject:build:en-US"
            },

Please note, that build and serve configurations are defined in angular.json for each locale, which indicates that, a separate build and deployment will be created and run for each locale.

이제 CLI의 다음 명령을 사용하여 원하는 로켈에서 애플리케이션을 구축하고 실행할 수 있습니다.다음은 방차포어의 한 예다.

ng build --configuration=pa-Guru && ng serve --configuration=pa-Guru

여러 언어 환경이 병행적으로 실행되기를 원한다면, 서버 명령을 사용하여 --port 스위치를 추가하여 서로 다른 언어 환경의 서로 다른 포트에서 응용 프로그램에 서비스를 제공하십시오.
Angular i18n은 각 로켈마다 별도의 구축 및 배포를 통해 구현됩니다.하지만 Url 자체에서 로케일을 전환하는 것이 목표입니다.그 밖에 다른 더 간단한 사용 가능한 라이브러리보다 angular i18n 메커니즘을 선택하는 동기를 이해하는 것도 중요하다.
이것은 또 다른 박문에서 소개될 것이다.이것이 바로 서버 측의 렌더링이 작용하는 곳이다.
이 박문의 두 번째 부분.