Q: App deployed with Angular Internationalization config redirect to italian version at the first loading instead of english version I developed a small demo app to test angular internationalization (i18n + t9n) and deploy on firebase with the various distributions built according to locales.
Everything works correctly, if it were not for an issue:
at the first loading of the page, at reloading, and if in the url bar I type "https://angular-i18n-b5194.web.app"
without the local after, I am always redirected to the page in the Italian version.
Instead, I would like to be directed primarily to the English version page.
How can I do?
I have tried various configurations in the angular.json and firebase.json files but without solving.
This is the app: https://angular-i18n-b5194.web.app
This is my app.component.ts:
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  siteLanguage: string = "Italian";
  siteLocale: string;
  languageList = [
    { code: 'en', label: 'English' },
    { code: 'it', label: 'Italian' }
  ];
  constructor() { }
  ngOnInit() {
  this.siteLocale = window.location.pathname.split('/')[1];
  
  this.siteLanguage = this.languageList.find(f => f.code === this.siteLocale).label;
  }
}

This is my app.component.html:
<div class="page">

      <div class="language-switcher">
          <button mat-button [matMenuTriggerFor]="menu">
            {{siteLanguage}}
              <mat-icon>arrow_drop_down</mat-icon>
          </button>
          <mat-menu  #menu="matMenu">
              <a mat-menu-item href="/en">en</a>
              <a mat-menu-item href="/it">it</a>
          </mat-menu>
        </div>


  <div class="content">
    <h2 i18n>Angular Internationalization</h2>

    <p i18n>
      Internationalization, sometimes referenced as i18n, is the process of
      designing and preparing your project for use in different locales around
      the world. Localization is the process of building versions of your
      project for different locales. The localization process includes the
      following actions. Extract text for translation into different languages
      Format data for a specific locale A locale identifies a region in which
      people speak a particular language or language variant. Possible regions
      includes countries and geographical regions. A locale determines the
      formatting and parsing of the following details. Measurement units
      including date and time, numbers, and currencies Translated names
      including time zones, languages, and countries
    </p>
  </div>
</div>

This is my angular.json:
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "test-i18n": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/test-i18n",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "en": {
              "localize": ["en"]
            },
            "it": {
              "localize": ["it"]
            },
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "test-i18n:build:production"
            },
            "en": {
              "browserTarget": "test-i18n:build:en"
            },
            "it": {
              "browserTarget": "test-i18n:build:it"
            },
            "development": {
              "browserTarget": "test-i18n:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "test-i18n:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "t9n": {
          "builder": "angular-t9n:t9n",
          "options": {
            "translationFile": "src/locale/messages.xlf",
            "targetTranslationPath": "src/locale",
            "includeContextInTarget": true
          }
        }
      },
      "i18n": {
        "locales": {
          "en": "src/locale/messages.en.xlf",
          "it": "src/locale/messages.it.xlf"
        }
      }
    }
  },
  "cli": {
    "analytics": false
  }
}

This is my firebase.json:
{
  "hosting": {
    "public": "dist/test-i18n",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "/en{,/**}",
        "destination": "/en/index.html"
      },
      {
        "source": "/it{,/**}",
        "destination": "/it/index.html"
      }
    ],
    "i18n": {
      "root": "/"  
    }
  }
}

