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