Angular SSR服务创建异常：API调用路由匹配失败求助

问题描述 #

我在Angular SSR项目中尝试通过api/**路由发起API调用，相关配置在server.ts文件中。但调用时程序陷入循环，抛出以下错误：

ERROR RuntimeError: NG04002: Cannot match any routes. URL Segment: 'expressapi/content'
    at Recognizer.noMatchError (eval at instantiateModule (file:///Users/sam/Documents/Code/test-ngssr/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50858:28), <anonymous>:2664:12)
    at eval (eval at instantiateModule (file:///Users/USER/Documents/Code/test-ngssr/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50858:28), <anonymous>:2690:20)
    at eval (eval at instantiateModule (file:///Users/USER/Documents/Code/test-ngssr/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50858:28), <anonymous>:1659:33)
    at OperatorSubscriber._error (eval at instantiateModule (file:///Users/USER/Documents/Code/test-ngssr/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50858:28), <anonymous>:752:9)
    at OperatorSubscriber.error (eval at instantiateModule (file:///Users/USER/Documents/Code/test-ngssr/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50858:28), <anonymous>:488:12)
    at OperatorSubscriber._error (eval at instantiateModule (file:///Users/USER/Documents/Code/test-ngssr/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50858:28), <anonymous>:511:24)
    at OperatorSubscriber.error (eval at instantiateModule (file:///Users/USER/Documents/Code/test-ngssr/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50858:28), <anonymous>:488:12)
    at OperatorSubscriber._error (eval at instantiateModule (file:///Users/USER/Documents/Code/test-ngssr/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50858:28), <anonymous>:511:24)
    at OperatorSubscriber.error (eval at instantiateModule (file:///Users/USER/Documents/Code/test-ngssr/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50858:28), <anonymous>:488:12)
    at OperatorSubscriber._error (eval at instantiateModule (file:///Users/USER/Documents/Code/test-ngssr/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50858:28), <anonymous>:511:24) {
  code: 4002
}

运行该仓库应用即可复现循环问题，请求协助排查。

问题分析与修复方案 #

核心问题 #

1. 路由转发路径错误：server.ts中/api路由的转发逻辑未正确拼接路径，导致请求被转发后，Angular路由尝试匹配不存在的expressapi/content路径，触发路由错误。
2. 未处理的错误循环：API请求错误未被捕获，导致错误不断触发重复请求，形成循环。

修复步骤 #

1. 修正API转发逻辑
   在server.ts中，确保转发时保留/api之后的路径片段，正确拼接目标API地址：

   server.get('/api/*', (req, res) => {
     // 提取/api后的路径部分，拼接到目标API地址
     const path = req.params['0'];
     const targetUrl = `http://localhost:4000/expressapi/${path}`;
     // 使用http-proxy-middleware或直接发起请求转发
     proxy.web(req, res, { target: targetUrl });
   });
   

2. 验证后端API路由
   确认Express后端服务中存在/expressapi/content的路由定义，确保能正常处理请求。

3. 添加请求错误捕获
   在Angular服务中为API请求添加错误处理，避免未处理的错误引发循环：

   import { catchError } from 'rxjs/operators';
   import { of } from 'rxjs';
   
   this.http.get('/api/content').pipe(
     catchError(err => {
       console.error('API请求失败:', err);
       return of(null); // 根据业务需求返回默认值或处理逻辑
     })
   ).subscribe(response => {
     // 处理正常响应
   });
   

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