Angular5移除URL哈希(#)后刷新内部路由出现404错误求助

这是Angular开发者切换到HTML5路由（去掉URL里的#）时几乎都会踩的坑，我来给你一步步搞定！

问题根源 #

当你启用PathLocationStrategy（去掉URL里的#），Angular的路由是前端路由——也就是在浏览器端用JS处理页面跳转，不会向服务器发请求。但刷新页面时，浏览器会直接向服务器发送GET请求到/jobs这个路径，而你的服务器上根本没有/jobs对应的物理文件或后端接口，自然就返回404了。

第一步：确认Angular项目配置 #

先确保你的Angular项目本身的路由配置是正确的：

• 在AppModule的providers数组里，已经配置了HTML5路由策略（Angular 5默认就是这个，但还是检查下更稳妥）：

import { LocationStrategy, PathLocationStrategy } from '@angular/common';

@NgModule({
  // ...其他配置项
  providers: [
    { provide: LocationStrategy, useClass: PathLocationStrategy }
  ]
})
export class AppModule { }

• 确保src/index.html里的<base href="/">设置正确，这个标签告诉Angular路由的基准路径：如果你的应用部署在根域名下，就用/；如果是子路径（比如www.example.com/my-app），就要改成/my-app/。

第二步：配置服务器重写规则 #

核心思路是：让服务器把所有非真实文件/目录的请求，都转发到Angular的入口文件index.html，这样Angular就能接管路由，正确渲染对应的页面。下面是不同服务器的配置方法：

Apache服务器

在项目根目录（和index.html同层级）创建.htaccess文件，写入以下内容：

RewriteEngine On
# 如果请求的是真实存在的文件或目录，直接返回
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# 否则重写到index.html，交给Angular处理
RewriteRule ^ /index.html [L]

Nginx服务器

修改你的Nginx站点配置文件（比如/etc/nginx/sites-available/your-site.conf），在location /块中添加try_files规则：

server {
  listen 80;
  server_name www.example.com;
  root /path/to/your/angular/dist/folder;
  index index.html;

  location / {
    # 先尝试访问文件、目录，找不到就转发到index.html
    try_files $uri $uri/ /index.html;
  }
}

修改后记得重启Nginx生效：sudo systemctl restart nginx

IIS服务器

在项目根目录创建web.config文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<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>

额外提醒 #

如果你的应用部署在子路径下（比如www.example.com/my-app/jobs），需要做两个调整：

1. 修改index.html的<base href="/my-app/">
2. 服务器重写规则里的index.html路径也要加上子路径，比如Apache的RewriteRule ^ /my-app/index.html [L]，Nginx的try_files $uri $uri/ /my-app/index.html;

这样配置后，刷新/jobs这类内部路由页面就不会再出现404啦！

内容的提问来源于stack exchange，提问作者guy next door