Angular 14.2.1 SSR项目HttpClient带参数请求报错排查

以下是几种最可能的触发原因及验证方向：

1. HttpClient.get调用参数顺序/格式错误 #

这是最常见的原因：你可能错误地将HttpParams实例直接作为第二个参数传入，而非包裹在{ params: ... }的配置对象中，或者颠倒了url与参数的位置。

比如错误写法：

// 错误：将params作为第一个参数（url位置）传入，导致url为undefined
getData() {
  const params = new HttpParams().set('type', 'sample');
  return this.httpClient.get(params);
}

// 错误：未将params放入配置对象，导致HttpClient解析异常
getData() {
  const params = new HttpParams().set('type', 'sample');
  return this.httpClient.get('/api/sample', params);
}

正确写法应将params放在配置对象的params属性中：

getData() {
  const params = new HttpParams().set('type', 'sample');
  return this.httpClient.get('/api/sample', { params });
}

2. HttpParams包含未初始化的无效值（SSR环境特定） #

Angular 14的SSR在Node.js环境下，对HttpParams的序列化逻辑与浏览器端存在差异。如果你的HttpParams中包含undefined/null类型的键或值，可能导致请求配置对象被破坏，进而让HttpClient读取url时返回undefined。

需避免这类写法：

// 风险写法：fromObject中包含undefined值
const params = new HttpParams({ fromObject: { id: undefined, name: 'test' } });

3. HTTP拦截器逻辑冲突 #

如果你的应用中配置了HTTP拦截器，检查拦截器是否在处理带params的请求时，错误地修改了请求的url属性。比如拦截器中存在条件判断，仅当请求包含params时执行了req.clone({ url: undefined })这类错误逻辑。

可以在拦截器中临时打印请求对象，验证带params的请求是否出现url被篡改的情况：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  console.log('Request URL:', req.url, 'Has params:', !!req.params.keys().length);
  return next.handle(req);
}

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