web-dev-qa-db-ja.com

Angular 9でビルド中にi18nサイトのlocaleDataとLOCALE_IDを動的に更新する方法は？

私は複数の言語をサポートするアプリケーションを構築しようとしています-実際には最大20です。

デフォルトの言語はen-USです。ビルド中に、正常に機能する翻訳バージョンが作成されます。

ただし、すべてのビルドでLOCALE_IDは常にen-USです。そのため、パイプなどのロケールに依存できません。ビルド構成で設定されたロケールで更新されません。

各ロケールのコンパイル中にもこの警告（ここではドイツ語）が表示されます。

「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のプロバイダーもビルド中に更新されていないようです。

LOCALE_IDはAngularのデフォルト設定であるため、すでにregisterLocaleDataとen-USプロバイダーを削除しようとしました。しかし、それは行動を変えません。

app.module.tsもregisterLocaleDataの別の値に置き換える必要がありますか？これは、20の言語に関して大きなオーバーヘッドになります。

または、複数の言語でアプリケーションをデプロイするための別の正しい方法はありますか？

一部の構成が不足していますか？

angulartypescriptinternationalizationangular9angular-i18n
6
lampshade

Davidのコメント の助けを借りて、Angular 8プロジェクトから取得した部分があるため、構成に複数の誤りがあることがわかりました。

Angular 9のi18nの設定は異なり、angular.jsonの./node_modules/@angular/cli/lib/config/schema.jsonファイルのスキーマを確認して解決策を見つけました。

現在、一般的なビルド構成は1つしかなく、実際のプロジェクト設定に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
lampshade

プロバイダーでファクトリを使用できます

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

ファクトリーの詳細については https://angular.io/guide/dependency-injection-providers

0
Rene Arias