Angular项目移除路由hash(#)后刷新页面报错的解决咨询

移除useHash后，Angular启用了HTML5 History模式。此时页面刷新时，浏览器会直接向服务器请求当前URL（比如/user/profile），但服务器上没有对应这个路径的物理文件或后端路由，因此返回404错误。后续浏览器尝试加载静态资源时，会基于错误的404页面路径解析资源地址，导致更多加载失败。

核心是配置服务器，将所有非静态文件的请求转发到Angular项目的index.html，让前端路由接管页面渲染。以下是主流服务器的配置方式：

Nginx #

修改站点配置文件（如nginx.conf或站点专属配置），在location /块中添加try_files指令：

server {
    listen 80;
    server_name your-domain.com;
    root /usr/share/nginx/html; # 你的Angular dist目录路径

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

配置完成后重启Nginx生效。

Apache #

在Angular项目的部署根目录创建或修改.htaccess文件，添加URL重写规则：

RewriteEngine On
# 存在的文件或目录直接返回
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# 其他请求全部转发到index.html
RewriteRule ^ /index.html

确保Apache已启用mod_rewrite模块。

IIS #

在部署目录下创建web.config文件，添加URL重写规则：

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

需确保IIS已安装URL重写模块。

额外注意事项 #

• 确认Angular项目的base href配置正确：在angular.json的build.options中，baseHref设置为"/"（根域名部署）或对应子路径（如"/my-app/"）
• 开发环境下，ng serve默认已处理History模式的刷新问题，无需额外配置

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