Angular移除URL hash在Apache2子目录部署刷新返回404错误

前置检查：Apache 功能与权限配置 #

.htaccess 规则不生效最常见的原因是Apache未开启对应模块、未允许目录级配置覆盖，按以下步骤排查：

• 执行命令开启URL重写模块：sudo a2enmod rewrite
• 编辑Apache站点配置文件，默认路径为/etc/apache2/sites-available/000-default.conf，确保站点根目录的Directory块配置允许.htaccess覆盖规则：

<Directory /var/www/html>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

• 执行命令重启Apache使配置生效：sudo systemctl restart apache2

修正.htaccess规则 #

你当前在站点根目录和应用子目录同时放置.htaccess会产生规则冲突，直接删除/var/www/html路径下的.htaccess文件，仅保留/var/www/html/my-app路径下的配置文件即可。
将子目录下的.htaccess内容替换为以下正确配置：

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

原有配置存在两个问题：一是缺少RewriteBase指定子目录基准路径，二是文件存在性判断逻辑有漏洞，未覆盖空文件场景，会把实际存在的空文件请求错误重写到入口文件。

修正Angular构建配置 #

打开项目根目录下的angular.json文件，找到projects.my-app.architect.build.options节点，添加/修改两个配置项：

• baseHref 设置为 /my-app/
• deployUrl 设置为 /my-app/
  配置完成后重新执行生产构建：ng build --prod，将dist目录下生成的产物重新上传覆盖到/var/www/html/my-app路径。

验证 #

清除浏览器缓存后访问应用，进入任意子路由执行刷新操作，即可正常加载页面，不再返回404错误。

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