Angular项目构建后子URL刷新404问题求助

云原生阿岚

2026-5-11

没错，这确实是Angular路由策略与生产服务器配置不匹配导致的问题，具体来说是HTML5路由模式（Angular默认）下，服务器无法识别前端路由路径，从而返回404错误。

问题原因拆解

本地开发时，ng serve启动的内置开发服务器已经自动做了路由转发处理——所有前端路由请求都会被指向index.html，所以刷新子URL能正常工作。
生产构建部署后，服务器会把/system这类路径当成真实的后端资源路径去寻找对应的文件，找不到就返回404；而通过this.router.navigate跳转时，是Angular在前端直接处理路由切换，没有发起新的服务器请求，所以能正常跳转。

另外，你的路由配置写法有个小错误：RouterModule.forRoot的第二个参数应该是单个配置对象，但你现在拆成了两个对象，导致useHash: true并没有生效，项目实际上还是在使用默认的HTML5模式，这也是问题持续存在的关键原因之一。

两种解决方案

方案一：改用Hash模式（无需修改服务器配置）

Hash模式会在URL中添加#前缀（比如http://your-domain/#/system），服务器只会解析#之前的部分，后面的路由完全由Angular前端处理，刷新时服务器只会请求根路径的index.html，不会出现404。

修正你的路由配置，把所有选项合并到一个配置对象中：

RouterModule.forRoot(
  appRoutes,
  {
    enableTracing: true, // 调试用，上线前建议关闭
    useHash: true
  }
)

重新构建部署后，所有子URL刷新就能正常访问了。

方案二：保持HTML5模式，配置服务器重写规则

如果你想保留干净的URL（不带#），需要配置服务器将所有前端路由请求转发到index.html。以下是常见服务器的配置示例：

Nginx

在Nginx配置文件中添加try_files指令：

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

Apache

创建或修改.htaccess文件，添加以下内容：

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

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>

注意：选择方案二时，要确保你的服务器已经启用了URL重写模块（比如Apache的mod_rewrite、IIS的URL重写组件）。

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