Angular 17 SSR构建后dist/server文件夹该如何处理？

核心结论 #

必须上传dist/server文件夹到托管环境，只传browser文件夹相当于退化成了纯客户端渲染（CSR），这就是你首屏部分数据无法加载的原因。

两个文件夹的作用 #

• browser：客户端静态资源包，包含浏览器能直接解析的HTML、CSS、JS和静态资源，是用户最终在浏览器中运行的代码。
• server：Node.js服务端渲染逻辑包，负责处理以下关键工作：
  • 接收客户端请求，在服务端预渲染首屏HTML（包含预取的数据）并返回给浏览器
  • 处理Angular SSR特有的数据预取逻辑（比如TransferState、服务端HttpClient请求）
  • 若你用了Angular的服务端API路由，这部分代码也在server文件夹中

具体操作步骤 #

1. 完整上传dist目录：把整个dist/[你的项目名称]文件夹（包含browser和server）全部上传到托管环境，不要拆分上传。
2. 配置启动命令：在托管环境中设置Node.js启动命令，指向server文件夹下的入口文件。Angular 17 SSR构建后的入口文件通常是：

   node dist/[你的项目名]/server/main.js
   

   （如果你的构建输出是ES模块，入口文件可能是server.mjs，以实际文件为准）
3. 确认环境支持：确保托管环境支持Node.js运行（版本要匹配Angular 17的要求，建议v18+），并且端口映射正确（Angular SSR默认监听4000端口，需和托管环境的对外端口一致）。
4. 验证SSR生效：启动服务后，查看页面源码（右键→查看页面源代码），如果能看到预渲染的动态数据（比如原本需要客户端请求加载的内容直接出现在HTML中），说明SSR配置成功。

额外排查点 #

如果数据仍无法加载，检查：

• 是否在组件中使用了TransferState来传递服务端预取的数据，确保服务端和客户端的逻辑一致
• 服务端请求是否配置了provideHttpClient(withFetch())（Angular 17 SSR推荐的配置），避免服务端和客户端请求行为不一致
• 托管环境是否有防火墙或路由规则，阻止了服务端的内部API请求

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