Angular 18 SSR带点路由标识符跳转404问题求助

方案1：编码路由参数 #

传递参数时对带点的字符串做URL编码，避免服务器将其识别为静态文件路径：

<a [routerLink]="['/protocol/analysis', encodeURIComponent(item['key'])]">{{item['name']}}</a>

在目标组件中获取参数时解码：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
  const rawId = this.route.snapshot.paramMap.get('id');
  const id = rawId ? decodeURIComponent(rawId) : '';
  // 使用解码后的id执行后续逻辑
}

方案2：调整SSR服务器路由 fallback（以Express为例） #

如果用Express做SSR服务器，确保所有非静态文件请求都转发给Angular处理，防止带点的路径被误判为静态资源。修改server.ts的路由配置：

// 优先处理静态文件
server.use(express.static('dist/your-app-name/browser'));

// 其余所有请求交给Angular SSR处理
server.get('*', (req, res) => {
  res.render('index', { req, res });
});

注意静态文件路由要放在通配路由之前，保证真正的静态资源能正常访问。

方案3：自定义路由匹配器 #

通过自定义匹配器明确允许参数包含点字符：

import { UrlSegment, UrlMatcher } from '@angular/router';

export const customIdMatcher: UrlMatcher = (url) => {
  if (url.length === 3 && url[0].path === 'protocol' && url[1].path === 'analysis') {
    const idSegment = url[2];
    return {
      consumed: url,
      posParams: { id: idSegment }
    };
  }
  return null;
};

// 在路由配置中使用该匹配器
{
  path: 'protocol/analysis/:id',
  component: ProAnalysisComponent,
  matcher: customIdMatcher
}

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