Angular路由匹配错误排查：含括号URL重定向失败问题

错误原因 #

Angular默认路由解析逻辑会将圆括号()视为路由分段的分隔符，导致:slug参数无法完整捕获带圆括号的文件名（如AQAR (2017-18).pdf）。当访问http://localhost:4200/pdf/abc/AQAR%20(2017-18).pdf时，Angular会把(2017-18)拆成独立路由段2017-18，而你的路由仅匹配pdf/abc/:slug三段结构，多余的路由段直接触发Cannot match any routes错误。

直接访问目标PDF URL正常，是因为该请求由服务器直接处理静态资源，不经过Angular路由系统，自然不会触发路由匹配逻辑。

解决方案 #

方法一：自定义URL序列化器 #

重写Angular的URL序列化逻辑，对圆括号进行转义/还原，避免被当作路由分隔符：

1. 创建自定义序列化器类：

import { DefaultUrlSerializer, UrlTree } from '@angular/router';

export class CustomUrlSerializer extends DefaultUrlSerializer {
  parse(url: string): UrlTree {
    // 转义圆括号后再交给父类解析
    const encodedUrl = url.replace(/\(/g, '%28').replace(/\)/g, '%29');
    return super.parse(encodedUrl);
  }

  serialize(tree: UrlTree): string {
    const url = super.serialize(tree);
    // 还原转义的圆括号，保证URL显示正常
    return url.replace(/%28/g, '(').replace(/%29/g, ')');
  }
}

2. 在AppModule中注册该序列化器：

import { NgModule } from '@angular/core';
import { UrlSerializer } from '@angular/router';
import { CustomUrlSerializer } from './custom-url-serializer';

@NgModule({
  providers: [
    { provide: UrlSerializer, useClass: CustomUrlSerializer }
  ]
})
export class AppModule { }

方法二：自定义路由匹配器 #

为目标路由设置自定义匹配逻辑，强制将pdf/abc/之后的所有内容作为:slug参数：

修改路由配置如下：

{ 
  path: 'pdf/abc/:slug', 
  component: PdfComponent,
  matcher: (url) => {
    // 校验前两段路由是否匹配
    if (url.length >= 3 && url[0].path === 'pdf' && url[1].path === 'abc') {
      // 合并后续所有路由段为完整的slug参数
      const fullSlug = url.slice(2).map(segment => segment.path).join('/');
      return {
        consumed: url,
        posParams: {
          slug: { path: fullSlug }
        }
      };
    }
    return null;
  }
}

该匹配器会忽略URL中的特殊字符分隔，直接把pdf/abc/后的全部内容作为slug传递给组件。

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