Angular 12: How can I use separate environment.ts files per language (e.g. environment.en.ts, environment.de.ts)?

Solution for Angular 12: How can I use separate environment.ts files per language (e.g. environment.en.ts, environment.de.ts)?
is Given Below:

I’ve been working on a multi-language Angular app, which I deployed to Firebase hosting.

https://myAppDomain.de/de shows the German version.
https://myAppDomain.de/en shows the English version.

This works fine for the most parts, except I put some locale specific variables into environment.ts:

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

I want those values to change depending on the language of the app.

Therefore, I created separate environment.ts files:

environment.ts as the English dev environments file,
environment.prod.ts as the English prod environments file,
environment.de.ts as the German dev environments file,
environment.prod.de.ts as the German prod environments file,

I tried to replace them during build, so I configured angular.json like this:

   "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/"
                }
              },
            },
          },
        },

However, it’s not working. I always get the English environment.ts, no matter, which language version I load.

How can I configure this correctly? Or alternatively, what better way is there to achieve the same goal?

Update 2021-07-31:
Here’s an excerpt of my 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"
  },

I also added some more information from my angular.json.

I decided to go another way. Instead of having lots and lots of separate environment files, which would become the more tedious the more languages I would add, I went back to only having two environments files: One for dev and one for prod.

I created a class locale.ts, which contains a function for each of the variables, I used to have in environments.ts, like so:

  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;
  }

The function getCurrentLang() extracts the current language from the current path. For https://myAppDomain.de/de, it returns 'de'; for https://myAppDomain.de/en, it returns 'en'. This is the implementation for it:

  /**
   * 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("https://stackoverflow.com/");
    if (parts.length < 2)
      // The path does not contain a language code
      return undefined;
    const currentLang = return parts[1];
    return currentLang;
  }

Note: I first tried using Angular modules to determine the current path, e.g. this.router.url from import { Router } from '@angular/router';.
However none of those worked correctly, if the calling component was not the current <router-outlet>. For example, instead of https://myAppDomain.de/de/search I would just get https://myAppDomain.de/de, if the Locale class was not a part of the search component.