Angular路由**错误页在Netlify部署后无法正常工作求助

问题原因 #

Netlify是静态文件服务器，当你直接输入非根路径的URL（比如www.website.netlify.app/abcdef）时，它会尝试在部署的dist文件夹里找对应路径的静态文件，但Angular是单页应用（SPA），所有路由都是客户端侧处理的，服务器上不存在abcdef这个文件，因此Netlify会返回它的默认404页面，不会让Angular的通配符路由接管。只有通过页面内链接跳转时，是Angular客户端路由在处理，所以能正常显示自定义错误页。

解决办法 #

方法1：用_redirects文件配置 #

1. 在Angular项目的src目录下新建名为_redirects的文件（注意文件名以下划线开头），写入内容：

/* /index.html 200

这条规则会把所有路径的请求重定向到index.html，返回200状态码，让Angular客户端路由处理所有请求。

2. 修改angular.json，确保_redirects会被打包到dist目录：
   找到architect -> build -> options -> assets数组，添加"src/_redirects"，示例如下：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/_redirects"
]

3. 重新执行ng build生成dist文件夹，再部署到Netlify即可。

方法2：用netlify.toml配置 #

在项目根目录创建netlify.toml文件，写入内容：

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

Netlify会自动识别这个配置文件，无需修改angular.json，执行ng build后直接部署即可。

配置完成后，直接输入错误URL时，Netlify会把请求转发到index.html，Angular路由系统会接管请求，触发通配符路由{path: '**', component: ErrorComponent}，从而显示你的自定义错误页。

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