Как динамически обновлять localeData и LOCALE_ID для сайтов i18n во время сборки в Angular 9? - PullRequest
Новая
       55

Как динамически обновлять localeData и LOCALE_ID для сайтов i18n во время сборки в Angular 9?

6 голосов
/ 02 марта 2020

Я пытаюсь создать приложение, которое поддерживает несколько языков - фактически до 20.

Язык по умолчанию - en-US. Во время сборки создаются переведенные версии, которые прекрасно работают.

Однако во всех сборках LOCALE_ID всегда en-US. Так что я не могу положиться на локаль в трубах и т. Д. c. Он не обновляется с языком, установленным в конфигурации сборки.

Я получаю это предупреждение (здесь для немецкого языка) также во время компиляции для каждой локали:

Данные о локали для 'de -DE 'не может быть найден. Данные для локали не будут включены для этой локали.

Так выглядит конфигурация сборки в angular. json: 

"production-de": {
  "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"
    },
    {
      "type": "anyComponentStyle",
      "maximumWarning": "6kb"
    }
  ],
  "outputPath": "dist/de",
  "baseHref": "/de/",
  "i18nLocale": "de-DE",
  "i18nFile": "src/locale/messages/messages.de.xlf",
  "i18nFormat": "xlf"
},

Приложение создается с помощью этой команды: 

ng build configuration=production-de

Вот так выглядит мой app.module.ts : 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, LOCALE_ID } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';
import { registerLocaleData } from '@angular/common';

import localeEn from '@angular/common/locales/en';
import localeEnExtra from '@angular/common/locales/extra/en';

registerLocaleData(localeEn, 'en-US', localeEnExtra);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [
    {
      provide: LOCALE_ID,
      useValue: 'en-US'
    }
  ],
  bootstrap: [
    AppComponent
  ]
})

export class AppModule { }

Это Кажется, что registerLocaleData, а также провайдер для LOCALE_ID не обновляются во время сборки.

Я уже пытался удалить registerLocaleData и провайдера LOCALE_ID, так как en-US является настройкой по умолчанию в Angular. Но это не меняет поведения.

Должен ли я также заменить app.module.ts другими значениями для registerLocaleData? Это было бы огромными затратами в отношении 20 языков.

Или есть другой, но правильный способ развертывания приложения на нескольких языках?

Я пропустил какую-то конфигурацию?

Ответы [ 2 ]

0 голосов
/ 09 марта 2020

С помощью комментария Дэвида я обнаружил, что в конфигурации было много ошибок, потому что детали были взяты из проекта Angular 8.

Конфигурация для i18n в Angular 9 отличается, и я нашел решение, проверив схему файла angular.json в ./node_modules/@angular/cli/lib/config/schema.json.

Теперь есть только одна общая конфигурация сборки, и я добавил опции i18n к фактическим настройкам проекта. , Это то, что я добавил в angular.json: 

"projects": {
  "app": {
    "i18n": {
      "sourceLocale": "en",
      "locales": {
        "de": "src/locale/messages/messages.de.xlf"
      }
    },
    "architect": {
      "build": {
        "configurations": {
          "de": {
            "localize": ["de"]
          }
        }
      },
      "serve": {
        "configurations": {
          "de": {
            "browserTarget": "app:build:de"
          }
        }
      },

Теперь я могу обслуживать свое приложение на любом языке, используя CLI: 

ng serve --configuration=de

И я могу собрать все пакеты, используя: 

ng build --prod --localize

Наконец, это приводит к тому, что LOCALE_ID всегда устанавливается с правильным значением.

0 голосов
/ 04 марта 2020

Вы можете использовать фабрику для поставщиков 

providers: [
    {
      provide: LOCALE_ID,
      useFactory: langServiceFactory,
      deps: []
    }
  ],

Для получения дополнительной информации о фабриках https://angular.io/guide/dependency-injection-providers

...