에서 Angular의 localize 패키지와 별도의 로케일 구성을 실행하는 방법에 대해 논의했습니다.

여기에서는 서버에서 Angular 응용 프로그램을 렌더링하는 기술인 Angular Universal과 언어에 따라 다른 하위 디렉터리에서 Angular 앱에 액세스할 수 있도록 하는 방법에 대해 설명합니다.

먼저 아래 CLI 명령을 실행합니다.

ng add @nguniversal/express-engine --clientProject=demoproject

여기에서 clientProject는 기존 Angular 애플리케이션입니다. 이 명령은 서버 측 앱 모듈인 app.server.module.ts와 Express 웹 서버인 server.ts를 생성합니다. 이 웹 서버는 특정 요청에 대해 렌더링될 로케일을 결정하는 데 사용됩니다.

다음으로 Express 웹 서버를 수정하여 다음 코드를 추가합니다.

app.get('*', (req, res) => {
//this is for i18n
  const supportedLocales = ['en', 'pa',...];//supported Locales 
  const defaultLocale = 'en';
  const matches = req.url.match(/^\/([a-z]{2}(?:-[A-Z]{2})?)\//);

  //check if the requested url has a correct format '/locale' and matches any of the supportedLocales
  const locale = (matches && supportedLocales.indexOf(matches[1]) !== -1) ? matches[1] : defaultLocale;

  res.render(`${locale}/index`, { req });
});

// Start up the Node server
app.listen(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);
});

이 수정을 통해 웹 서버는 요청의 로케일을 식별하고 그에 따라 응답을 렌더링합니다.

angular.json에서 ng add @nguniversal/express-engine 명령을 실행하면 아래와 같이 서버 구성이 자동으로 추가되는 것을 알 수 있습니다.

"server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },"pa-Guru": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },
            "en-US": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }

package.json에서 프로젝트에 따라 아래 스크립트를 추가/수정하여 앱의 모든 로케일을 빌드하고 렌더링합니다.

"compile:server": "webpack --config webpack.server.config.js --progress --colors",
    "serve:ssr": "node dist/server",
    "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
    "build:client-and-server-bundles": "ng build --configuration=pa-Guru && ng build --configuration=en-US  && ng run demoproject:server:production  &&  ng run demoproject:server:en-US &&  ng run demoproject:server:pa-Guru"

마지막으로 Angular CLI에서 다음 명령을 실행하여 요청 Url의 baseHref에 따라 익스프레스 서버를 통해 로케일을 렌더링하고 런타임에 로케일을 변경할 수 있습니다.

npm run build:ssr && npm run serve:ssr

서버 측 렌더링 사용의 이점

검색 엔진과 소셜 미디어 사이트는 웹 크롤러를 사용하여 애플리케이션 콘텐츠를 색인화하고 해당 콘텐츠를 웹에서 검색할 수 있도록 합니다. 이러한 웹 크롤러는 사용자가 할 수 있는 것처럼 고도의 대화형 Angular 애플리케이션을 탐색하고 색인을 생성하지 못할 수 있습니다.

Angular Universal은 JavaScript 없이 쉽게 검색하고 연결하고 탐색할 수 있는 정적 버전의 앱을 생성할 수 있습니다. Universal은 또한 각 URL이 완전히 렌더링된 페이지를 반환하기 때문에 사이트 미리보기를 사용할 수 있도록 합니다.

우리는 사용자의 관심을 끌기 위해 방문 페이지의 정적 버전을 제공합니다. 동시에 그 뒤에 있는 전체 Angular 앱을 로드합니다. 사용자는 방문 페이지에서 거의 즉각적인 성능을 감지하고 전체 앱이 로드된 후 완전한 대화형 경험을 얻습니다.

사용 가능한 다른 라이브러리보다 Angular i18n을 사용하는 동기

먼저 몇 가지 단점을 살펴보겠습니다.

Angular i18n은 한 번에 하나의 언어에서만 작동하므로 언어를 변경하려면 애플리케이션을 완전히 다시 로드해야 합니다.

Angular i18n은 현재 템플릿에서 i18n 사용만 지원합니다.

그러나 장점이 단점을 압도합니다.

Angular i18n은 ICU 표현식(복수 및 선택)을 지원합니다.

번역 프로세스가 잘 정의되어 있으며 감지하기 쉽습니다.
누락된 번역을 계획에 통합할 수 있습니다.
앱을 배포하기 전에 (추출, 번역가에게 보내기, 병합).

확장이 잘 됩니다.
소프트웨어를 사용하면 x개 언어로 번역할 수 있습니다.
한 번만 추출하고 번역 파일을 생성하면 됩니다.
각 로케일(전문 도구에서 수행해야 함)

앱이 실행될 때 미리 번역되기 때문에 매우 효율적입니다.
부트스트랩, 번역을 적용하기 위한 추가 작업이 없으며 * 사전 렌더링과 잘 작동합니다.
빌드 시 번역을 병합하기 때문에
지시문, 구성 요소 및 기타 html 요소를 지원할 수 있습니다.
다른 언어로 이동하거나 제거할 수 있습니다.
필요한 경우

지연 로딩에 대해 걱정할 필요가 없습니다. 번들이
빌드 시 번역되며 여기에는 지연 로드가 포함됩니다.
모듈.

시간 내 줘서 고마워. 블로그가 마음에 들면 공유하고 반응을 제공하십시오.