Angular SSR整合Express异常：Express路由未生效问题排查

核心原因 #

ng serve默认启动的是客户端开发服务器，并不会运行你修改的server.ts中的Express SSR服务器，这就是自定义路由被Angular接管的根本原因。

解决步骤 #

1. 使用正确的SSR启动命令 #

项目创建后，package.json中已包含SSR开发启动命令，执行：

npm run dev:ssr

该命令会编译并启动包含Express的SSR服务器，此时server.ts中的路由配置才会生效。

2. 确保自定义路由顺序正确 #

所有自定义API路由必须放在Angular Universal的通配符（*）路由处理之前，否则会被通配符拦截。示例修改后的server.ts：

export function app(): express.Express {
  const server = express();
  // ... 其他初始化代码

  // 自定义路由：放在Angular处理逻辑之前
  server.get('/toto', (req, res) => {
    res.json({ msg: "toto" });
  });

  // 替换默认的Angular渲染逻辑为直接返回JSON
  server.get('*', (req, res) => {
    res.json({ msg: "welcome" });
  });

  return server;
}

3. 验证SSR配置正确性 #

检查angular.json中的SSR配置，确认entry指向正确的server.ts：

"projects": {
  "<你的项目名>": {
    "architect": {
      "ssr": {
        "builder": "@angular-devkit/build-angular:server",
        "options": {
          "outputPath": "dist/<你的项目名>/server",
          "main": "server.ts", // 确认此处指向正确
          "tsConfig": "tsconfig.server.json"
        }
      }
    }
  }
}

4. 测试验证 #

启动npm run dev:ssr后，用curl测试：

• curl http://localhost:4200 → 返回{"msg":"welcome"}
• curl http://localhost:4200/toto → 返回{"msg":"toto"}

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