Angular应用静态目录路由问题：刷新/page-b失效的解决咨询

一、ng serve中路由回退到index.html的配置位置 #

ng serve使用的Angular开发服务器默认内置了路由回退逻辑，会把所有匹配不到实际文件的请求转发到index.html，以此支持单页应用路由。

如果需要自定义该行为，可在项目根目录的angular.json文件中配置：
找到projects -> [你的项目名称] -> architect -> serve -> options，添加historyApiFallback相关配置，示例如下：

"options": {
  "historyApiFallback": true,
  // 也可做精细配置，比如指定特定路径的回退规则
  // "historyApiFallback": {
  //   "rewrites": [
  //     { "from": /^\/api\/.*$/, "to": "/api" }
  //   ]
  // }
}

这个配置本质是传递给webpack-dev-server的historyApiFallback参数，默认处于开启状态，一般无需手动修改。

二、静态目录部署后刷新页面失效的解决方法 #

问题核心是静态服务器无法识别Angular的前端路由：刷新/page-b时，服务器会尝试寻找对应物理文件，找不到就返回404。解决思路是让服务器把所有匹配不到文件的请求转发到index.html，交由Angular路由处理。

以下是几种常见部署场景的解决方案：

1. Nginx部署 #

修改Nginx站点配置文件的location块：

server {
  listen 80;
  server_name your-domain.com;
  root /path/to/your/dist/folder;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

try_files会依次尝试访问请求的文件、目录，都找不到时返回index.html。

2. Apache部署 #

在dist目录下创建.htaccess文件，添加以下内容：

RewriteEngine On
# 请求index.html时直接跳过规则
RewriteRule ^index\.html$ - [L]
# 若请求的文件或目录不存在，转发到index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

注意需确保Apache开启了mod_rewrite模块。

3. 静态托管服务（如GitHub Pages、Netlify） #

• GitHub Pages：
  1. 构建时指定正确的基础路径：npm run build -- --base-href /your-repo-name/
  2. 在dist目录复制index.html为404.html——GitHub Pages会把404请求转发到404.html，Angular路由可识别该请求路径。
• Netlify：
  在项目根目录创建netlify.toml文件，添加重定向规则：

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

4. Express(Node.js)部署 #

使用connect-history-api-fallback中间件处理路由回退：

1. 安装依赖：npm install connect-history-api-fallback --save
2. 在Express服务中添加中间件：

const express = require('express');
const history = require('connect-history-api-fallback');
const app = express();

// 先处理路由回退
app.use(history());
// 再托管静态文件
app.use(express.static(__dirname + '/dist'));

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

另外，构建项目时务必确保base-href参数正确：部署在根路径用--base-href /，部署在子路径用--base-href /sub-path/，否则Angular的资源路径和路由会出现异常。

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