Angular 12部署后直接访问URL出现404的问题求助

问题原因 #

Angular默认使用HTML5模式路由（PathLocationStrategy），这种模式的特点是：

• 站内导航时，Angular的前端路由系统会拦截URL变化，不会向服务器发送新请求，直接渲染对应组件，所以一切正常。
• 直接访问URL或刷新页面时，浏览器会直接向服务器发送对应路径的请求，但服务器上没有匹配该路径的物理文件或后端路由，因此返回404错误。

另外你的代码里存在两处需要修正的问题：

1. 路由跳转语法错误：当前this.router.navigate(['guest/user' + id])会生成类似guest/user651的错误路径，正确写法应为：

this.router.navigate(['guest/user', id], navigationExtras);
// 或者明确拼接路径
this.router.navigate(['/guest/user/' + id], navigationExtras);

2. 路由配置冗余冲突：app-routing.module.ts中guest路由下的{ path: 'user', loadChildren: ... }可以删除，因为guest-routing.module.ts里已经配置了user/:id的子路由，保留会导致路由匹配异常。

解决方法 #

方案1：配置服务器重写规则（推荐，保留HTML5模式） #

需要在服务器端配置，将所有请求重定向到Angular的入口文件index.html，让Angular路由系统处理路径。

Nginx 配置

在你的Nginx站点配置中添加如下规则：

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

该规则会让Nginx优先尝试访问请求的文件/目录，找不到则返回index.html，交由Angular处理路由。

Apache 配置

在项目根目录创建或修改.htaccess文件，添加：

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

IIS 配置

在项目根目录的web.config中添加重写规则：

<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>

方案2：切换到Hash模式（无需修改服务器） #

如果无法修改服务器配置，可以改用Angular的HashLocationStrategy，URL会带上#（如https://www.project.com/#/guest/user/651），这种模式下服务器只会处理#之前的路径，不会返回404。

修改app-routing.module.ts的路由配置：

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { useHash: true }) // 启用Hash模式
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

该方法操作简单，但URL会带有#，对SEO有一定影响，适合快速测试或受限环境使用。

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