禁用命名路由出口功能，解决含()路径路由匹配失败问题

这个问题的核心原因是Angular默认的路由解析器会把URL中的()识别为**命名路由出口（named outlet）**的语法标识，在页面刷新或初始加载时，浏览器传递的未编码URL会被错误拆分，导致路由匹配失败；而[routerLink]是应用内部导航，Angular会自动编码特殊字符，所以能正常工作。

要解决这个问题，我们可以通过自定义URL序列化器来覆盖默认行为，让()被当作普通路径字符处理，从而让path: '**'能正确匹配这类URL。

步骤1：创建自定义URL序列化器 #

新建一个custom-url-serializer.ts文件，实现Angular的UrlSerializer接口，重写解析和序列化方法：

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

export class CustomUrlSerializer implements UrlSerializer {
  private defaultSerializer = new DefaultUrlSerializer();

  parse(url: string): UrlTree {
    // 解析前将()替换为URL编码，避免被识别为命名出口标识
    url = url.replace(/\(/g, '%28').replace(/\)/g, '%29');
    return this.defaultSerializer.parse(url);
  }

  serialize(tree: UrlTree): string {
    let url = this.defaultSerializer.serialize(tree);
    // 序列化时将编码转回()，保证URL显示正常
    url = url.replace(/%28/g, '(').replace(/%29/g, ')');
    return url;
  }
}

步骤2：在模块中替换默认序列化器 #

在根模块（比如AppModule）的providers数组中注册自定义序列化器，替换Angular默认的实现：

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [
    { provide: UrlSerializer, useClass: CustomUrlSerializer }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

原理说明 #

• 当页面刷新或初始加载时，自定义的parse方法会先把URL中的(和)替换为对应的URL编码%28和%29，这样Angular的路由解析器就不会把它们当成命名出口的分隔符，而是将整个包含()的路径段视为普通路径部分。
• 序列化时，serialize方法会把编码后的字符转回()，确保浏览器地址栏显示的URL保持用户友好的格式。

这样修改后，/folder (test)/subfolder/file.txt这类URL在刷新时会被正确解析，最终匹配到path: '**'路由，加载NavigationComponent，同时内部的[routerLink]导航也能正常工作。

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