Deploy Angular 10 app with localize using Firebase

Issue

I'm using Angular 10 (the last version at the moment) and @angular/localize to translate my app into french and english.

Everything is well configured.

For the build, I'm using this command:

"build:prod": "ng build --prod --localize"

which gives:

I want to deploy the app using Firebase. I correctly set everything when running firebase init hosting

firebase.json looks like:

{
  "hosting": {
    "public": "dist/myAngularApp",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

Now my issue is that there is no index.html file at the root of dist/myAngularApp so when deploying and targeting default url, nothing is displayed.

For example:

• on the browser I target https://XXXXXXX.web.app/en/ -> English version rendered: OK
• on the browser I target https://XXXXXXX.web.app/fr/ -> French version rendered: OK
• on the browser I target https://XXXXXXX.web.app/ -> Nothing and I wish it redirects to '/en/' relative path

I want to render the english version of the app by default and I expected, I could specify it when building my project using a specific option or inside angular.json file.

Any idea ?

Thank you !

Solution

Add a rewrite rule to your hosting object in your firebase.json:

"rewrites": [ 
  { "source": "**", "destination": "/en/index.html"} 
]

Answered By - Poul Kruijt