Angular 12:如何使用独立环境?每种语言的Ts文件(例如environment.en).ts, environm

Question

我一直在开发一个多语言的Angular应用，我把它部署到Firebase主机上。

https://myAppDomain.de/de为德文版本
https://myAppDomain.de/en为英文版本

这在大多数情况下工作得很好，除了我在environments .ts中放入了一些特定于语言环境的变量:

numberFormatLocale: 'de',
dateFormatLocale: 'de-DE',
timePickerLocale: 'de-DE',
momentLocale: 'de',
...

我希望这些值根据应用程序的语言而改变。

因此，我创建了单独的环境。ts文件:

environment.ts作为英文dev environments文件，
environment.prod.ts作为英文prod environments文件，
environment.de.ts作为德文dev environments文件，
environment.prod.de.ts作为德文prod environments文件，

我试图在构建期间替换它们，所以我像这样配置angular.json:

"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"i18nMissingTranslation": "error",
"localize": true,
"outputPath": "dist/myAppDomain",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.webmanifest",
{
"glob": "**/*",
"input": "node_modules/ngx-auth-firebaseui/assets/",
"output": "./assets/"
}
],
...
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
},
{
"replace": "src/environments/environment.de.ts",
"with": "src/environments/environment.prod.de.ts"
}
],
...
},
"de": {
"localize": [
"de"
],
"baseHref": "/de/",
"fileReplacements": [
{
"replace": "src/environments/environment.prod.ts",
"with": "src/environments/environment.prod.de.ts"
},
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.de.ts"
}
]
},
"en": {
"localize": [
"en"
],
"baseHref": "/en/"
}
},
},
},
},

然而，它不起作用。我总是得到英语环境。无论加载哪个语言版本。

如何正确配置?或者，还有什么更好的方法来实现同样的目标?

更新2021-07-31:以下是我的package.json节选:

"scripts": {
"ng": "ng",
"start": "ng serve --configuration=en --port 4200 && ng serve --configuration=de --port 4201",
"start:en": "ng serve --configuration=en --port 4200",
"start:de": "ng serve --configuration=de --port 4201",
"build": "ng build",
"build:prod": "ng build --configuration=production",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},

我还从我的angular.json中添加了一些更多的信息。

Answer 1

我决定另辟蹊径。比起拥有大量独立的环境文件(如果我添加的语言越多就会变得越乏味)，我回到了只有两个环境文件的状态:一个用于dev，一个用于prod。

我创建了一个类locale。它包含了我在环境中使用过的每个变量的函数。t，像这样:

private static numberFormatLocaleCache: string;
/**
* Number format locale
*/
static numberFormatLocale(): string {
if (!this.numberFormatLocaleCache) {
const currentLang = Locale.getCurrentLang();
switch (currentLang) {
case 'de':
this.numberFormatLocaleCache = 'de';
break;
default:
this.numberFormatLocaleCache = 'en';
}
}
return this.numberFormatLocaleCache;
}

getCurrentLang()函数从当前路径中提取当前语言。对于https://myAppDomain.de/de，它返回'de';对于https://myAppDomain.de/en，它返回'en'。这是它的实现:

/**
* Delivers the current lang.
* @return language, e.g. 'en'
*/
static getCurrentLang(): string | undefined {
const path = window.location.pathname.replace(window.location.href, '');
const parts = path.split('/');
if (parts.length < 2)
// The path does not contain a language code
return undefined;
const currentLang = return parts[1];
return currentLang;
}

注意:我首先尝试使用Angular模块来确定当前路径，例如import { Router } from '@angular/router';中的this.router.url。然而，如果调用组件不是当前的<router-outlet>，这些都不能正常工作。例如，如果Locale类不是搜索组件的一部分，我将得到https://myAppDomain.de/de，而不是https://myAppDomain.de/de/search。