Настройка Angular Universal с Angular Localization

Наверное единственная полезная статья на medium’е, к которой я сам периодически возвращаюсь — Локализация в Angular 9 с помощью @angular/localize с universal.

Из-за того, что в предыдущей статье много букв, решил написать сокращенный вариант, только с нужными параметрами.

Установка

Для статьи потребуется:

• установленный Angular;
• установленный и настроенный Angular Universal;
• установленный пакет локализации Angular.

Для установки Angular используйте angular-cli:

ng new my-project

Или создайте monorepo с помощью Nx:

yarn create nx-workspace --package-manager=yarn

Для установки Universal:

ng add @nguniversal/express-engine

Для установки локализации:

ng add @angular/localize

Отмечу, если вы используете Nx и конфигурация Angular у вас 2 версии, то при установке может быть так, что в polyfills.ts не добавиться пакет:

import ‘@angular/localize/init’;

С чем это связано не понятно, возможно для Anuglar 13.2 этого не нужно. Но в документации написано, что он все еще нужен.

Настройка локализации для Angular Universal

После установки пакетов нужно в приложение Angular добавить локализацию.

В раздел с приложением добавляем пути до файла с локализацией:

{
  "projectType": "application",
   ...
  "i18n": {
    "sourceLocale": "en-US",
    "locales": {
      "ru-RU": {
        "translation": "libs/russian/localization/src/lib/messages.xlf",
      "baseHref": ""
    }
  },
  ...
},

В задаче сборки браузерного приложения (build), глобально для всех сборок задаем требуемые локализации:

{
  "projectType": "application",
  ...
  "targets": {
    "build": {
      "executor": "@angular-devkit/build-angular:browser",
      "localize": ["ru-RU"]
  ...

Для конфигураций, локализацию можно не дублировать.

Для серверной сборки приложения нужно глобально отключить локализацию, а для всех ее конфигураций добавить.

"server": {
  "executor": "@angular-devkit/build-angular:server",
  "options": {
    ...
    "localize": false
  },
  "configurations": {
    "production": {
      "localize": ["ru-RU"],
      ...
    },
    "development": {
      "localize": ["ru-RU"],
      ...
    },
    "ru": {
      "optimization": false,
      "sourceMap": true,
      "extractLicenses": false
    }
  },
  "defaultConfiguration": "production"
},

Это все необходимо для того, что локальный dev-serve для Universal не умеет запускаться с локализацией. Для этого создается новая конфигурация с требуемой локализацией. В данном случае это:

"ru": {
  "optimization": false,
  "sourceMap": true,
  "extractLicenses": false
}

В конфигурации запуска локального dev ssr сервера меняем параметр серверной конфигурации на созданный в предыдущем шаге:

"serve-ssr": {
  "executor": "@nguniversal/builders:ssr-dev-server",
  "configurations": {
    "development": {
      "browserTarget": "store:build:development",
      "serverTarget": "store:server:ru"
    },
    "production": {
      "browserTarget": "store:build:production",
      "serverTarget": "store:server:production"
    }
  },
  "defaultConfiguration": "development"
},

То есть с store:server:development был заменен на store:server:ru.

Также из-за этого в файле server.ts, нужно указать локализацию:

const distFolder = join(process.cwd(), 'dist/store/browser/ru-RU');

В результате получим следующий файл конфигурации приложения:

Резюме

Для настройки локализации в Angular c Universal необходимо:

• Указать базовые настройки локализации;
• Добавить глобально локализацию в задачу сборки веб версии (build);
• Для серверной сборки (server) необходимо глобально указать "localize": false, а также для всех конфигураций указать локализацию и создать новую конфигурацию без локализации;
• В задаче локального ssr сервера (serve-ssr) поменять конфигурацию для серверной сборки приложения, на созданную в предыдущем шаге;
• В файле сервера, добавить префикс локализации, чтобы серверное приложение искало файлы браузерной версии в нужной папке.

Подписывайтесь на блог, чтобы не пропустить новые статьи про Angular, и веб-разработку. Medium | Telegram| VK | FB | Tw | Inst | Ln