Angular国际化应用：Firebase Hosting重写/重定向配置问题

问题根源 #

你的问题出在Firebase Hosting的自动i18n路由解析和当前重写规则的匹配逻辑上：

• 配置中的"i18n": { "root": "/" }会让Firebase自动识别路径开头的语言代码（如en），即使后面没有斜杠，也会把/enXYZ拆分为语言en和路径XYZ，导致重写后指向/en/index.html，Angular路由接收到的路径变为/XYZ，最终显示/en/XYZ。
• 现有重写规则未区分「带斜杠的语言前缀路径」和「以语言代码开头的clientId路径」，无法正确匹配用户预期的/en/enXYZ路由。

解决方案：调整重定向+重写规则，禁用Firebase自动i18n #

步骤1：修改firebase.json配置 #

移除自动i18n配置，添加精确的重定向和重写规则，确保非语言前缀的路径自动加上默认语言前缀：

{
  "hosting": {
    "public": "dist/main-web",
    "appAssociation": "AUTO",
    "redirects": [
      // 重定向所有非语言前缀/非links的路径到默认英文路径
      {
        "source": "^(?!/en/|/el/|/links/).*$",
        "destination": "/en/$0",
        "regex": true,
        "type": 301
      }
    ],
    "rewrites": [
      {
        "source": "/links/**",
        "dynamicLinks": true
      },
      {
        "source": "/en/**",
        "destination": "/en/index.html"
      },
      {
        "source": "/en",
        "destination": "/en/index.html"
      },
      {
        "source": "/el/**",
        "destination": "/el/index.html"
      },
      {
        "source": "/el",
        "destination": "/el/index.html"
      }
    ]
  }
}

规则说明 #

• 重定向规则：使用负向预查正则^(?!/en/|/el/|/links/).*$，匹配所有不是以/en/、/el/或/links/开头的路径，自动重定向到/en/{原路径}。比如访问/enXYZ会被重定向到/en/enXYZ，完全符合你的预期。
• 重写规则：仅处理带明确语言前缀的路径，确保对应语言版本的Angular应用被加载。
• 移除自动i18n：避免Firebase错误拆分路径。

步骤2：确认Angular路由配置 #

确保你的Angular路由正确解析语言前缀和clientId参数：

const routes: Routes = [
  {
    path: ':lang',
    children: [
      { path: ':clientId', component: ClientComponent },
      // 其他业务路由
    ]
  },
  // 根路径重定向到默认语言
  { path: '', redirectTo: '/en', pathMatch: 'full' }
];

关于禁用JS无响应的说明 #

这是单页应用（SPA）的正常特性：Firebase重写仅负责将请求指向Angular的index.html，路由逻辑完全依赖前端JS处理。如果需要禁用JS后仍能响应路由，需启用Angular服务器端渲染（SSR）并配合Firebase Functions部署，这是额外的复杂度，根据你的业务需求决定是否需要。

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