Angular 2中#开头URL路由失效，请求修复方案

核心原因 #

Angular默认将#视为哈希路由（HashLocationStrategy）的分隔符，而非路径的一部分。当你访问#/customcomponent时，浏览器会把#后面的内容当成锚点，实际发送给服务器的请求路径仍是根路径/，导致Angular加载首页组件。

具体修复步骤 #

• 切换到HTML5路由模式
  在AppRoutingModule中配置PathLocationStrategy，让Angular解析完整的URL路径，而非依赖哈希分隔符：

  import { NgModule } from '@angular/core';
  import { RouterModule, Routes, PathLocationStrategy, LocationStrategy } from '@angular/router';
  
  const routes: Routes = [/* 你的路由配置 */];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: [{ provide: LocationStrategy, useClass: PathLocationStrategy }]
  })
  export class AppRoutingModule { }
  

• 编写自定义路由匹配器
  用matcher识别包含#的路径，解析出实际要加载的组件：

  import { UrlSegment, UrlMatcher } from '@angular/router';
  
  export function hashPrefixMatcher(url: UrlSegment[]): any {
    // 匹配根路径下以#开头的单段路径，比如#customcomponent
    if (url.length === 1 && url[0].path.startsWith('#')) {
      return {
        consumed: url,
        // 可选：传递参数给组件
        posParams: { target: new UrlSegment(url[0].path.slice(1), {}) }
      };
    }
    return null;
  }
  

  然后在路由数组中添加匹配规则：

  const routes: Routes = [
    { path: '', component: HomeComponent },
    { matcher: hashPrefixMatcher, component: CustomComponent }
  ];
  

• 配置服务器（生产环境必做）
  HTML5模式下，服务器需要将所有请求转发到index.html，否则刷新带#的URL会返回404。以Nginx为例，修改配置：

  server {
    listen 80;
    server_name your-domain.com;
    root /path/to/your/angular/dist;
  
    location / {
      try_files $uri $uri/ /index.html;
    }
  }
  

  开发环境中Angular CLI的ng serve已内置该处理，无需额外配置。

• 正确触发路由跳转
  在组件中通过Router导航时，要将#作为路径的一部分传入：

  import { Router } from '@angular/router';
  
  constructor(private router: Router) {}
  
  goToCustomPage() {
    this.router.navigate(['/#customcomponent']);
  }
  

内容的提问来源于stack exchange，提问作者bekir.corum