Angular 16 Todo应用部署Netlify后直接访问路由报404求助

原因说明 #

Angular是单页应用（SPA），所有路由逻辑都在前端浏览器中处理。当你通过应用内按钮跳转至/add时，是Angular路由模块在浏览器内部完成页面切换，不会向Netlify服务器发送新的资源请求。但直接在地址栏输入https://todo-ang.netlify.app/add时，浏览器会直接向Netlify服务器请求该路径对应的物理文件，而服务器上不存在/add这个文件，因此返回「页面未找到」的404错误。

解决方法 #

核心思路是让Netlify将所有路由请求转发到Angular的入口文件index.html，再由Angular路由接管处理，有两种标准实现方式：

方法1：使用_redirects文件 #

1. 在Angular项目的src目录下创建_redirects文件，写入以下内容：

/* /index.html 200

2. 修改项目根目录的angular.json文件，找到build配置中的assets数组，添加"src/_redirects"，确保构建时该文件被复制到输出目录：

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

3. 重新执行构建命令：

ng build

4. 将构建后的dist文件夹重新部署到Netlify即可。

方法2：使用netlify.toml配置文件 #

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

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

将该文件提交到代码版本库，Netlify在部署时会自动读取配置并生效重定向规则，无需额外修改Angular构建配置。

原理补充 #

Netlify的重定向规则会拦截所有请求路径，将它们统一转发到index.html。服务器返回Angular入口文件后，浏览器加载完成时，Angular路由模块会解析当前URL的路径（比如/add），并渲染对应的组件，从而实现正确的页面展示，避免404错误。

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