Angular 12: How to deploy custom index.html outside language-specific directories in multi-language app?

Viewed 278

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

The app uses Angular's i18n feature. The build process creates separate directories for each language. The command ng build --localize creates those folders:

 dist/myApp/en 
 dist/myApp/de

Now, I would like an index.html at the domain root, which does redirection based on the browser's language setting. How can I do that? I already have an appropriate script, but don't know how to deploy anything outside the /de or /en folders.

Here is a shortened version of my `angular.json:

...
  "projects": {
        "myApp": {
          "projectType": "application",
          "schematics": {
            "@schematics/angular:application": {
              "strict": true
            }
          },
          "root": "",
          "sourceRoot": "src",
          "prefix": "app",
          "i18n": {
            "sourceLocale": "en",
            "locales": {
              "de": "src/locale/messages.de.xlf"
            }
          },
          "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "i18nMissingTranslation": "error",
                "localize": true,
                "outputPath": "dist/myApp",
                "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",
                ],
             ...
              },
              "configurations": {
                "production": {
                  "fileReplacements": [
                    {
                      "replace": "src/environments/environment.ts",
                      "with": "src/environments/environment.prod.ts"
                    }
                  ],
                  ...
                },
                "de": {
                  "localize": [
                    "de"
                  ],
                  "baseHref": "/de/"
                },
                "en": {
                  "localize": [
                    "en"
                  ],
                  "baseHref": "/en/"
                }
              },
              "defaultConfiguration": ""
            },
            "serve": {
              "builder": "@angular-devkit/build-angular:dev-server",
              "options": {
                "browserTarget": "myApp:build"
              },
              "configurations": {
                "production": {
                  "browserTarget": "myApp:build:production"
                },
                "en": {
                  "browserTarget": "myApp:build:en"
                },
                "de": {
                  "browserTarget": "myApp:build:de"
                }
              }
            },
            ...
          }
        }
      }
...

Excerpt of my firebase.json:

...
    "hosting": {
        "public": "dist/myApp",
        "ignore": [
          "firebase.json",
          "**/.*",
          "**/node_modules/**"
        ],
        "rewrites": [
          {
            "source": "/de/**",
            "destination": "/de/index.html"
          },
          {
            "source": "/en/**",
            "destination": "/en/index.html"
          }
        ],
        "i18n": {
          "root": "/"
        }
      },
...
0 Answers
Related