Angular 17 SSR：如何仅将服务端.mjs编译为CommonJS格式的.js

要解决托管服务商要求服务端文件为CommonJS格式，但不想影响前端ES模块编译的问题，你可以通过拆分TS配置+修改Angular构建配置实现：

1. 创建服务端专属TS配置文件 #

在项目根目录新建tsconfig.server.json，继承主配置的同时仅覆盖服务端需要的编译规则：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "CommonJS",
    "outDir": "./dist/server-out-tsc",
    "target": "ES2020" // 根据托管环境的Node.js版本调整，兼容即可
  },
  "files": [
    "src/main.server.ts",
    "server.ts"
  ],
  "angularCompilerOptions": {
    "entryModule": "./src/app/app.server.module#AppServerModule"
  }
}

• extends：复用主tsconfig的基础配置，避免重复编写
• module: "CommonJS"：指定服务端代码编译为CommonJS格式
• files：明确服务端的入口文件，确保仅这些文件使用该编译规则

2. 修改angular.json拆分服务端构建配置 #

打开angular.json，找到你的项目下的architect -> server节点，修改tsConfig指向新创建的配置文件，同时指定输出文件名（避免默认的.mjs后缀）：

"server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
    "outputPath": "dist/server",
    "main": "server.ts",
    "tsConfig": "tsconfig.server.json",
    "outputFileName": "server.js"
  },
  "configurations": {
    "production": {
      "outputHashing": "media",
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ]
    }
  }
}

• tsConfig：替换为tsconfig.server.json，让服务端构建使用专属配置
• outputFileName: "server.js"：强制输出为.js后缀的CommonJS文件

3. 验证编译结果 #

执行SSR构建命令：

npm run build:ssr

构建完成后，查看dist/server目录下的server.js文件，代码会以require/module.exports的CommonJS语法呈现，而前端的dist/browser目录仍保持ES模块格式，互不影响。

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