Angular 17 SSR静态资源迁移至CDN后页面异常问题排查

核心原因：S3 MIME类型配置错误 #

这个问题大概率源于S3的静态资源MIME类型未正确设置，而非Angular代码问题。当你把browser目录上传到S3时，如果没有配置正确的MIME映射，S3会默认将所有文件以text/html类型返回，而Angular的JS模块、CSS、字体等资源需要对应正确的MIME类型才能被浏览器正确解析，这就是你遇到"Expected a JavaScript module script but got text/html"错误的核心原因。

你遗漏的关键配置步骤 #

1. 修正S3文件的MIME类型 #

• 优先用工具批量上传：不要直接通过S3控制台拖拽文件夹上传（这种方式极易导致MIME类型错误），建议用AWS CLI自动识别文件后缀并设置正确类型：

  aws s3 sync ./dist/your-project/browser s3://your-bucket-name --content-type-auto
  

• 已上传文件的批量修正：
  1. 进入S3控制台，选中所有静态资源文件
  2. 点击「操作」>「更改元数据」
  3. 添加Content-Type元数据，对应规则：
     • .js/.mjs → application/javascript
     • .css → text/css
     • .html → text/html
     • .png/.jpg → image/png/image/jpeg
     • .svg → image/svg+xml

2. 检查CDN缓存与配置 #

如果搭配了CloudFront等CDN：

• 确认缓存行为没有强制覆盖Content-Type元数据
• 手动清除CDN缓存（之前错误的MIME类型可能已被缓存）

3. Angular server.ts的正确配置 #

修改browserDistFolder为CDN地址时，确保是完整绝对URL（如https://your-cdn-domain.com），且不要保留本地静态资源服务配置——因为browserDistFolder仅用于生成HTML中的资源引用路径，不需要express再本地服务这些文件：

// 错误示例：保留本地路径+express.static
// export const browserDistFolder = join(process.cwd(), 'dist/your-project/browser');
// app.use(express.static(browserDistFolder));

// 正确示例：替换为CDN地址
export const browserDistFolder = 'https://your-cdn-domain.com';

4. 验证资源请求 #

打开浏览器开发者工具（F12）→「网络」标签，刷新页面：

• 查看JS/CSS资源的响应头，确认Content-Type是否匹配对应文件类型
• 若仍返回text/html，检查S3元数据是否已更新、CDN缓存是否彻底清除

额外排查点 #

• 检查S3静态网站托管设置：如果开启了静态网站托管，确保404错误文档的配置没有覆盖正常资源的返回逻辑
• 确认S3的CORS配置允许你的SSR域名跨域请求资源（虽然这不是MIME错误的直接原因，但会间接导致页面资源加载失败）

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