Angular根目录与子目录双应用路由冲突 子应用刷新跳404如何解决

方案1：Web服务器层配置（优先推荐） #

本质上刷新请求会先到达Web服务器，直接将/subfolder前缀的所有请求转发给子应用的入口文件，不会触发主应用的路由逻辑，性能最优。

• Nginx 配置示例：
  在主应用对应的Nginx server块中添加如下规则，优先级高于根路径规则：

location ^~ /subfolder {
    alias /path/to/your/app2/dist; # 替换为子应用实际部署的物理目录
    try_files $uri $uri/ /subfolder/index.html;
}
# 主应用原有根路径配置保持不变
location / {
    try_files $uri $uri/ /index.html;
}

• Apache 配置示例：
  在主应用根目录的.htaccess文件中添加如下规则：

RewriteEngine On
# 优先处理subfolder路径请求，转发到子应用入口
RewriteRule ^subfolder/(.*)$ /subfolder/index.html [L]
# 主应用原有重写规则保持不变
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html [L]

方案2：主应用路由层适配（无服务器修改权限时使用） #

调整主应用的路由规则，在通配符路由之前添加subfolder路径的忽略规则：

1. 基础适配方案
   在路由数组的通配符规则前新增subfolder路径匹配规则：

// app-routing.module.ts
const routes: Routes = [
  // 原有其他路由配置保持不变
  // 新增subfolder匹配规则，主应用不处理该路径下的路由
  {
    path: 'subfolder/**',
    redirectTo: ''
  },
  // 原有通配符路由放在数组最后
  {
    path: '**',
    redirectTo: '/404'
  }
];

2. 进阶适配方案
   如果基础方案仍有问题，可以用自定义路由匹配器让通配符规则直接排除subfolder路径：

// app-routing.module.ts
import { UrlSegment } from '@angular/router';

// 自定义匹配器：路径开头为subfolder时不命中通配符规则
function excludeSubfolderMatcher(url: UrlSegment[]) {
  return url.length && url[0].path !== 'subfolder' ? { consumed: url } : null;
}

const routes: Routes = [
  // 原有其他路由配置保持不变
  // 替换原有通配符规则
  {
    matcher: excludeSubfolderMatcher,
    redirectTo: '/404'
  }
];

提示：你已完成子应用的--base-href和--deploy-url配置，子应用侧无需额外调整。

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