Angular页面刷新报404，sourceMap设为true时.htaccess配置无效

问题概述 #

Apache服务器部署Angular多项目应用后，刷新页面触发404错误：The requested URL was not found on this server.，同时伴随Apache错误码AH00687。尝试多种.htaccess配置均无效，且angular.json中开启sourceMap: true时问题依旧。

当前配置如下：

现有.htaccess配置 #

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

angular.json核心配置片段 #

{
  "projects": {
    "synestez.io": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/synestez.io"
          },
          "configurations": {
            "staging": {
              "sourceMap": true
            }
          }
        }
      }
    },
    "sequencer": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/sequencer"
          }
        }
      }
    },
    "dj-mixer": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/dj-mixer"
          }
        }
      }
    },
    "worklet-generator": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/worklet-generator"
          }
        }
      }
    }
  }
}

路由配置 #

import { Routes } from '@angular/router';
import { ContactComponent } from '../../projects/store/src/app/contact/contact.component';
import { HomeComponent } from '../../projects/store/src/app/home/home.component';
import { WorkletGeneratorOrderComponent } from '../../projects/store/src/app/worklet-generator-order/worklet-generator-order.component';
import { WorkletGeneratorComponent } from '../../projects/store/src/app/worklet-generator/worklet-generator.component';
import { AppComponent as WorkletGeneratorAppComponent } from './../../projects/worklet-generator/src/app/app.component';
import { ContainerComponent } from './container/container.component';

export const routes: Routes = [{
  path:'',
  component:ContainerComponent,
  children:[{
    path:'',
    component:HomeComponent
  },{
    path:'worklet-generator/live',
    component:WorkletGeneratorAppComponent
  },{
    path:'worklet-generator/order',
    component:WorkletGeneratorOrderComponent
  },{
    path:'worklet-generator',
    component:WorkletGeneratorComponent
  },{
    path:'contact',
    component:ContactComponent
  }]
}];

解决方案 #

1. 修正.htaccess规则（适配sourceMap和多项目） #

原规则未正确放行真实存在的静态文件（如.map文件），导致sourceMap开启时资源请求被错误转发。替换为以下配置：

<IfModule mod_rewrite.c>
  RewriteEngine On
  # 根据实际部署根路径调整，主项目部署在根目录则为/，子目录则对应路径如/synestez.io/
  RewriteBase /
  
  # 放行所有真实存在的文件或目录（包括.map文件）
  RewriteCond %{REQUEST_FILENAME} -f [OR]
  RewriteCond %{REQUEST_FILENAME} -d
  RewriteRule ^ - [L]
  
  # 所有非静态资源请求转发到index.html，交由Angular路由处理
  RewriteRule ^ index.html [L]
</IfModule>

2. 配置Apache服务器权限与模块 #

• 启用mod_rewrite模块：

  # Linux环境执行
  sudo a2enmod rewrite
  sudo systemctl restart apache2
  

• 确保虚拟主机配置中允许.htaccess生效，在对应<Directory>块中添加：

  <Directory /var/www/html/your-deployment-root>
    AllowOverride All
    Require all granted
  </Directory>
  

• 多项目子目录部署时，为每个子项目单独添加规则（或在子目录下放置独立.htaccess）：
  比如sequencer子项目的.htaccess需设置：

  <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /sequencer/
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]
    RewriteRule ^ index.html [L]
  </IfModule>
  

3. 调整Angular构建与部署路径 #

• 构建时指定base-href，确保路由路径与部署路径匹配：

  # 主项目构建（根目录部署）
  ng build --project synestez.io --configuration staging --base-href /
  
  # 子项目构建（子目录部署）
  ng build --project sequencer --base-href /sequencer/
  ng build --project dj-mixer --base-href /dj-mixer/
  

• 将构建输出目录（如dist/synestez.io、dist/sequencer）的文件分别部署到Apache对应目录下：
  • 主项目文件放入Apache根目录（如/var/www/html/）
  • 子项目文件放入对应子目录（如/var/www/html/sequencer/）

4. 确认路由模式 #

确保Angular使用默认的PathLocationStrategy（非Hash模式），若之前修改过需改回：
在AppModule的providers中移除{ provide: LocationStrategy, useClass: HashLocationStrategy }配置，保持默认策略即可。

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