我正在尝试构建一个支持多种语言的应用程序,实际上最多支持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
的提供程序在构建过程中没有更新。
我已经尝试删除registerLocaleData
和LOCALE_ID
提供程序,因为en-US
是Angular中的默认设置。但这并不能改变人们的行为。
是否必须将app.module.ts
也替换为不同的registerLocaleData
值?对于20种语言来说,这将是一个巨大的开销。
或者,有没有一种不同但正确的方法可以用多种语言部署应用程序?
我是否缺少某些配置?
在David评论的帮助下,我发现配置中存在多个错误,因为部件取自Angular 8项目。
Angular 9中i18n的配置不同,我通过检查./node_modules/@angular/cli/lib/config/schema.json
中angular.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