如何在Firebase App Hosting上启用Angular 18 SSR本地化？

核心结论 #

Firebase App Hosting 原生支持路由与本地化配置，完全不需要额外配置 Nginx/Apache——Angular 文档提到的这类服务器是针对传统自建部署场景的，不适用于 Firebase 托管环境。

具体配置步骤 #

1. 配置 Angular 项目的本地化与 SSR

• 先通过 ng add @angular/localize 启用本地化支持，在项目中定义多语言翻译文件（如 messages.en.xlf、messages.tr.xlf）。
• 修改 angular.json，为每种语言配置独立的构建目标，指定对应的 baseHref 和输出目录：

  "projects": {
    "your-app": {
      "i18n": {
        "sourceLocale": "en",
        "locales": {
          "tr": "src/locale/messages.tr.xlf"
        }
      },
      "architect": {
        "build": {
          "configurations": {
            "production-en": {
              "localize": ["en"],
              "baseHref": "/en/",
              "outputPath": "dist/your-app/browser/en"
            },
            "production-tr": {
              "localize": ["tr"],
              "baseHref": "/tr/",
              "outputPath": "dist/your-app/browser/tr"
            }
          }
        },
        "server": {
          "configurations": {
            "production-en": {
              "localize": ["en"],
              "outputPath": "dist/your-app/server/en"
            },
            "production-tr": {
              "localize": ["tr"],
              "outputPath": "dist/your-app/server/tr"
            }
          }
        }
      }
    }
  }
  

• 修改 server.ts，动态根据请求路径设置 APP_BASE_HREF，确保 SSR 服务能识别语言前缀：

  import { APP_BASE_HREF } from '@angular/common';
  
  // 在 server 启动逻辑中添加
  server.get('*', (req, res) => {
    const langPrefix = req.path.startsWith('/tr') ? '/tr/' : '/en/';
    res.render(indexHtml, {
      req,
      providers: [
        { provide: APP_BASE_HREF, useValue: langPrefix }
      ]
    });
  });
  

2. 配置 Firebase App Hosting

• 修改 firebase.json，设置托管根目录、重写规则，将所有语言路径的请求导向对应的 SSR 服务入口：

  {
    "hosting": {
      "public": "dist/your-app/browser",
      "rewrites": [
        {
          "source": "/en/**",
          "function": "ssrEn" // 对应 en 语言的 SSR Cloud Function
        },
        {
          "source": "/tr/**",
          "function": "ssrTr" // 对应 tr 语言的 SSR Cloud Function
        },
        {
          "source": "**",
          "destination": "/en/index.html" // 默认跳转英文版本
        }
      ]
    },
    "functions": {
      "source": "dist/your-app/server"
    }
  }
  

• 注意：Angular SSR 部署到 Firebase 需要将 server 代码打包为 Cloud Function，可通过 @angular/fire 工具链简化流程，或手动将不同语言的 server 代码部署为独立 Function。

3. 解决 baseHref 路由问题

• 构建时务必指定对应语言的 baseHref，比如执行：

  ng build --configuration=production-en
  ng run your-app:server --configuration=production-en
  

• 确保 Firebase 重写规则正确匹配语言前缀，避免路径解析错误；同时 server.ts 中动态注入的 APP_BASE_HREF 必须与构建时的 baseHref 完全一致。

验证部署 #

构建完成后执行 firebase deploy，访问 /en 和 /tr 路径，检查本地化内容加载、路由跳转是否正常，确认 SSR 渲染的页面包含对应语言的内容。

内容的提问来源于stack exchange，提问作者p_escobr