使用 Firebase 本地化部署 Angular 10 個應用程序

Question

我正在使用 Angular 10（目前的最新版本）和@angular/localize將我的應用程序翻譯成法語和英語。

一切都配置良好。

對於構建，我使用這個命令：

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

這使：

我想使用 Firebase 部署應用程序。我在運行firebase init hosting時正確設置了所有內容

firebase.json看起來像：

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

現在我的問題是dist/myAngularApp的根目錄下沒有index.html文件，因此在部署和定位默認 url 時，沒有顯示任何內容。

例如：

• 在瀏覽器上，我的目標https://XXXXXXX.web.app/en/ -> 英文版呈現：OK
• 在瀏覽器上，我的目標https://XXXXXXX.web.app/fr/ -> 法語版本呈現：OK
• 在瀏覽器上我定位https://XXXXXXX.web.app/ -> Nothing 我希望它重定向到'/en/'相對路徑

我想默認呈現應用程序的英文版本，我希望在使用特定選項構建項目時或在angular.json文件中指定它。

任何的想法？

謝謝 ！

Answer 1

在您的firebase.json中為您的托管 object 添加重寫規則：

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

Answer 2

現在您可以設置 i18n 重寫。 請添加：

//firebase.json

"i18n": {
    "root": "localized-files" //directory that contains your i18n folders
 }

Firebase 根據“Accept-Language”的值提供內容 header

完整參考： https://firebase.google.com/docs/hosting/i18n-rewrites