Angular本地化场景下无语言前缀的404路由无法解析问题

问题根源 #

当访问无语言前缀的未知路由（如example.com/unknown）时，Netlify找不到对应静态文件，直接返回默认404页面；而带/en或/de前缀的路由，因Angular i18n构建后生成了对应目录的index.html，Netlify会转发请求到该文件，Angular路由系统得以接管并触发自定义404跳转。核心问题是Netlify的重写规则未覆盖根路径的所有请求。

解决方案 #

1. 配置Netlify重写规则 #

在项目src目录下创建_redirects文件，添加以下规则：

/en/* /en/index.html 200
/de/* /de/index.html 200
/* /index.html 200

• 规则优先级：更具体的前缀路由（/en/*、/de/*）放在前面，根路径通配符（/*）放在最后
• 作用：所有请求（无论是否带语言前缀）都会被转发到对应目录的index.html，交由Angular路由系统处理未知路径

若使用netlify.toml配置，对应内容为：

[[redirects]]
  from = "/en/*"
  to = "/en/index.html"
  status = 200

[[redirects]]
  from = "/de/*"
  to = "/de/index.html"
  status = 200

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

2. 确保重写文件被正确打包 #

修改angular.json中的assets配置，将_redirects纳入打包资源：

"architect": {
  "build": {
    "options": {
      "assets": [
        "src/favicon.ico",
        "src/assets",
        "src/_redirects"
      ]
    }
  }
}

3. 验证Angular路由配置 #

当前路由配置中{ path: '**', redirectTo: '404' }已正确放在最后，需额外确认：

• NotFoundComponent已在对应模块中声明并导出
• 根路由模块（如AppRoutingModule）已正确导入到主模块

4. 重新部署测试 #

重新构建Angular项目并部署到Netlify，测试example.com/unknown是否跳转至自定义404页面。

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