Angular 5路由刷新失效问题（路由与服务器路由同名）

我来帮你搞定这个Angular 5里的路由刷新失效问题！先理清楚核心原因，再给你两种实用的解决方案：

问题本质 #

你配置的Angular客户端路由（/calendar、/map）和服务器端的路由路径重名了。Angular是单页应用，正常跳转时是客户端路由在接管，但刷新页面时，浏览器会直接向服务器发起对应路径的请求——如果服务器本身也有/calendar或/map的路由（比如后端接口、静态页面），服务器就会直接处理这个请求，不会把控制权交还给Angular，导致你的Angular组件无法加载，路由自然失效。

先再确认下你的配置（方便其他开发者参考）：

你的Angular路由配置 #

{path: 'calendar', canActivate: [AuthGuard], component: ProjectsComponent }
{path: 'map', canActivate: [AuthGuard], component: MapComponent }

页面导航按钮代码 #

<li routerLinkActive="active"><a [routerLink]="['/calendar']">Kalender</a></li>
<li routerLinkActive="active"><a [routerLink]="['/map']">Map</a></li>

解决方案 #

方案一：服务器端重写路由（推荐，保持干净URL） #

这种方式能保留不带#的美观URL，核心思路是：让服务器把所有非静态资源的请求，都重定向到Angular的入口文件index.html，交给Angular路由系统处理。

不同服务器的配置方式如下：

• Apache：在项目根目录创建.htaccess文件，写入：

RewriteEngine On
# 若请求的是真实存在的文件/目录，直接访问
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# 否则重定向到index.html
RewriteRule ^ /index.html [L]

• Nginx：在server配置块中添加：

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

• IIS：修改web.config，添加URL重写规则：

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

方案二：切换为哈希路由策略（快速临时解决） #

如果暂时没法修改服务器配置，可以让Angular使用哈希模式（URL带#），比如http://yourdomain.com/#/calendar。浏览器只会把#前面的部分发给服务器，这样就不会和服务器的同名路由冲突了。

配置步骤：
在app.module.ts中导入并配置HashLocationStrategy：

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

@NgModule({
  declarations: [
    // 你的组件声明
  ],
  imports: [
    // 你的模块导入
    RouterModule.forRoot(/* 你的路由配置 */)
  ],
  providers: [
    AuthGuard,
    // 替换路由策略为哈希模式
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

注意事项 #

• 方案一中，要确保服务器上的静态资源（如JS、CSS、图片）路径正确，避免被错误重定向到index.html。
• 方案二的哈希模式虽然简单，但URL会带有#，对SEO有轻微影响，适合临时场景或内部系统。

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