Angular应用部署到子目录遇重定向循环及资源加载问题求助

AI 小北

2026-7-5

解决步骤

1. 修正代理服务器的转发规则

确保Web服务器将/abc/new/**的请求去掉前缀后转发到Angular应用的根路径（http://localhost:4200/），这是解决重定向循环和资源路径错误的核心：

Nginx配置示例：
```
location /abc/new/ {
    proxy_pass http://localhost:4200/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}
```
注意proxy_pass末尾的斜杠，它会自动将/abc/new/后的路径追加到4200/后，比如/abc/new/main.js会转发到4200/main.js。

Apache配置示例：

ProxyPass /abc/new http://localhost:4200
ProxyPassReverse /abc/new http://localhost:4200
RewriteEngine On
RewriteRule ^/abc/new/(.*)$ /$1 [PT]

2. 正确配置Angular的base href

不要手动修改index.html里的<base>标签，通过以下方式动态设置：

启动开发服务器时直接指定参数：
```
ng serve --base-href /abc/new/
```

或者在angular.json的项目配置中添加：

"projects": {
  "你的项目名": {
    "architect": {
      "serve": {
        "options": {
          "baseHref": "/abc/new/",
          // 其他原有配置...
        }
      }
    }
  }
}

3. 检查路由配置避免循环

如果路由中有默认重定向规则，务必使用相对路径：

错误写法（会基于根路径重定向，配合base href引发循环）：
```
{ path: '', redirectTo: '/home', pathMatch: 'full' }
```
正确写法（自动适配base href的相对路径）：
```
{ path: '', redirectTo: 'home', pathMatch: 'full' }
```