Как правильно собрать приложение Angular 6 с i18n в «каталоги локалей» с baseHref? - PullRequest
Новая
       23

Как правильно собрать приложение Angular 6 с i18n в «каталоги локалей» с baseHref?

0 голосов
/ 15 октября 2018

Я пытаюсь сделать свое приложение доступным на нескольких языках и следую руководству Angular i18n .По умолчанию используется языковой стандарт en-US, а также есть перевод на французский fr и испанский es.

Это прекрасно работает, например, при запуске приложения с использованием ng serve --configuration=fr.

Теперь я нахожусь в точке, где я хочу создать приложение.Я использую эту команду: 

ng build --prod --build-optimizer --i18n-file src/locale/messages.es.xlf --i18n-format xlf --i18n-locale es

И я обновил angular.json, как объяснено в руководстве: 

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
    "outputPath": "dist/myapp",
    },
    "configurations": {
      "production": {
        "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
      },
      "es": {
        "aot": true,
        "outputPath": "dist/myapp/es",
        "baseHref": "/es/",
        "i18nFile": "src/locale/messages.es.xlf",
        "i18nFormat": "xlf",
        "i18nLocale": "es",
        "i18nMissingTranslation": "error"
      },
      "fr": {
        "aot": true,
        "outputPath": "dist/myapp/fr",
        "baseHref": "/fr/",
        "i18nFile": "src/locale/messages.fr.xlf",
        "i18nFormat": "xlf",
        "i18nLocale": "fr",
        "i18nMissingTranslation": "error"
    }
  }
},

Процесс сборки работает, иЯ получаю переведенную версию приложения.

К сожалению, некоторые вещи не работают:

1.)
Приложение всегдавстроить в dist/myapp, а не в dist/myapp/fr или dist/myapp/es.

2.)
Параметр baseHref не используется, поэтому я не могу простопереместите сборку в подкаталог, например /dist/myapp/fr.

Чтобы сделать это более понятным, после запуска build я хочу структуру папок, подобную этой: 

/dist/myapp/en
/dist/myapp/fr
/dist/myapp/es

И когда myapp это мой webroot, в браузере должна быть возможность доступа к следующим маршрутам: 

/en
/fr
/es

3.)
Наконец, атрибут lang установлен неправильно.index.html не изменяется, всегда будет отображаться: 

<html lang="en">

вместо <html lang="es"> или <html lang="fr">.

Чего не хватает для правильной работы?

1 Ответ

0 голосов
/ 22 октября 2018

Вы должны передать правильную конфигурацию при сборке.В противном случае он просто будет использовать production конфигурацию

. Вам фактически потребуется сделать одну сборку для каждого языка. 

ng build --configuration=fr
ng build --configuration=en
ng build --configuration=es

Вы можете указать для каждой конфигурации, какие опциииспользуйте (aot, выходное хеширование, ...) или вы можете поместить его в настройку options внутри build

  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
    "outputPath": "dist/myapp",
     "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "extractCss": true,
        "namedChunks": false,
        "aot": true,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": true
    },

Что касается изменения атрибута lang, в соответствии с этим GitHub Issue , вы должны сделать это вручную 

export class AppComponent {
  constructor(@Inject(DOCUMENT) doc: Document, @Inject(LOCALE_ID) locale: string, renderer: Renderer2) {
    renderer.setAttribute(doc.documentElement, 'lang', locale);
  }
}
...