Angular 4重置密码链接点击后出现404错误求助

嘿，这个问题我太熟了！本质是Angular单页应用（SPA）的路由机制和服务器配置不匹配导致的，我给你拆解下原因和解决办法：

为什么会出现404？ #

Angular默认用的是HTML5模式路由（PathLocationStrategy），这种模式下，当你从应用内部点击导航链接时，是Angular客户端路由器在处理跳转，不会发请求给服务器。但如果用户直接在地址栏输入/ResetPassword或者点击邮件里的链接，请求会先打到你的后端服务器——而服务器上根本没有/ResetPassword这个物理路径对应的文件，自然就返回404了。

解决办法 #

方法1：启用Hash模式（快速简单） #

这种方式会在URL里加个#，让服务器只处理根路径，剩下的路由交给Angular客户端处理。

修改你的AppRoutingModule，在路由配置里添加useHash: true：

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

之后你的重置链接会变成www.mywebsite.com/#/ResetPassword?token=token123，服务器只会响应/，#后面的部分由Angular处理，就不会404了。

方法2：配置服务器重定向（推荐，保持URL美观） #

如果你不想URL里带#，就需要让服务器把所有路由请求都重定向到index.html，让Angular路由器接管处理。下面是主流服务器的配置方式：

Apache服务器

在项目根目录创建.htaccess文件，写入以下内容：

RewriteEngine On
# 仅当请求的文件/目录不存在时，重定向到index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html [L]

Nginx服务器

修改Nginx配置文件的location块：

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

IIS服务器

在web.config中添加重写规则：

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

额外检查点 #

• 确认你的ResetPasswordComponent已经正确导入到路由模块中，路由路径的大小写要和链接完全一致（Angular路由默认区分大小写）。
• 确认生产构建后的文件（ng build --prod生成的dist文件夹内容）已经正确部署到服务器，index.html能正常访问。
• 本地开发环境（ng serve）已经内置了路由重定向处理，所以本地测试不会有问题，重点检查生产服务器的配置。

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