Angular SSR环境下出现Failed to load module script错误如何解决

报错原文：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
该错误本质是浏览器请求JS模块资源时，服务端未找到对应资源，fallback返回了HTML格式的404/首页内容，不符合模块脚本的MIME校验要求。可按以下步骤排查修复：

1. 修正SSR构建的base-href配置 #

不要单独给ng build加参数，需要同步调整SSR构建脚本：

• 打开项目根目录的package.json，找到scripts下的build:ssr命令，原始结构通常为：
  ng build --prod && ng run [你的项目名]:server:production
• 若需要配置子目录部署，在客户端构建环节追加--base-href参数，注意路径首尾必须加斜杠：
  ng build --prod --base-href /yoursubfolder/ && ng run [你的项目名]:server:production
  如果本地测试无部署到子目录的需求，直接去掉--base-href参数，用默认根路径/即可

2. 调整SSR服务端的静态资源路由 #

打开服务端入口文件server.ts，修改静态资源匹配规则：

• 原本的静态资源服务代码一般为：

  const distFolder = join(process.cwd(), 'dist/[你的项目名]/browser');
  app.use(express.static(distFolder));
  

• 配置了子目录的场景下，需要给静态资源加路由前缀：

  app.use('/yoursubfolder', express.static(distFolder));
  

同时同步修改路由匹配逻辑，确保仅对应前缀下的请求返回SSR渲染的HTML页面，避免资源请求被错误拦截返回HTML。

3. 验证构建输出路径配置 #

打开angular.json，确认构建输出路径配置正确：

• 客户端构建（projects -> [你的项目名] -> architect -> build -> options）的outputPath值为dist/[你的项目名]/browser
• 服务端构建（projects -> [你的项目名] -> architect -> server -> options）的outputPath值为dist/[你的项目名]/server
  路径配置错误会导致服务端找不到静态资源，触发报错。

4. 重新构建测试 #

配置修改完成后，重新执行构建和启动命令：

• 执行构建：npm run build:ssr
• 启动服务：npm run serve:ssr
• 访问时带对应base-href前缀，比如http://localhost:4000/yoursubfolder/

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