如何在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 { }

似乎registerLocaleDataLOCALE_ID的提供程序在构建过程中没有更新。

我已经尝试删除registerLocaleDataLOCALE_ID提供程序,因为en-US是Angular中的默认设置。但这并不能改变人们的行为。


是否必须将app.module.ts也替换为不同的registerLocaleData值?对于20种语言来说,这将是一个巨大的开销。

或者,有没有一种不同但正确的方法可以用多种语言部署应用程序?

我是否缺少某些配置?

在David评论的帮助下,我发现配置中存在多个错误,因为部件取自Angular 8项目。

Angular 9中i18n的配置不同,我通过检查./node_modules/@angular/cli/lib/config/schema.jsonangular.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在任何时候都被设置为正确值的效果。

您可以在供应商上使用工厂

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

有关工厂的更多信息https://angular.io/guide/dependency-injection-providers

最新更新