Angular SSR编译警告：服务端非ESM模块误报问题咨询

原因分析 #

Angular构建工具（webpack）会对所有代码（包括服务端SSR代码）进行模块格式检查，当检测到express-session这类CommonJS模块时，会触发“优化失效”警告——但这类警告仅针对浏览器端代码的tree-shaking和模块拼接优化，服务端Node.js代码完全兼容CommonJS，不需要这类优化，因此这些警告属于误报。

解决方案 #

方案1：通过Angular官方配置允许指定CommonJS模块 #

在angular.json中，找到你的项目下的server构建目标，在options里添加allowedCommonJsDependencies，列出服务端用到的CommonJS模块：

{
  "projects": {
    "your-app-name": {
      "architect": {
        "server": {
          "options": {
            "outputPath": "dist/your-app-name/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json",
            "allowedCommonJsDependencies": [
              "express-session",
              "express",
              // 其他服务端依赖的CommonJS模块，比如cookie-parser等
            ]
          }
        }
      }
    }
  }
}

这个配置会告诉Angular：这些模块是服务端专用的，无需对它们触发优化警告。

方案2：自定义服务端Webpack配置关闭警告 #

如果需要批量忽略所有服务端CommonJS警告，可以创建自定义Webpack配置文件（比如webpack.server.config.js）：

module.exports = {
  stats: {
    // 过滤掉CommonJS模块优化警告
    warningsFilter: /CommonJS or AMD dependencies can cause optimization bailouts/
  }
};

然后在angular.json的server目标options中引入该配置：

{
  "projects": {
    "your-app-name": {
      "architect": {
        "server": {
          "options": {
            // ...其他配置
            "webpackConfig": "webpack.server.config.js"
          }
        }
      }
    }
  }
}

额外验证 #

确认你的tsconfig.server.json已正确包含/src/api目录，且服务端代码的模块类型配置正确（比如"module": "CommonJS"或"NodeNext"），确保服务端代码的编译逻辑独立于浏览器端。

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