Angular 18升级后多语言SSR项目故障：tsconfig.server.json丢失

问题背景 #

升级到Angular 18后，原多语言SSR服务完全失效：

• tsconfig.server.json及相关多语言脚本被自动移除
• angular.json中原独立的server构建配置被删除
• 手动恢复tsconfig.server.json后，构建不再生成预期的server/server/mjs文件
• 代理服务器因找不到对应语言的server入口文件启动崩溃

修复步骤 #

1. 调整angular.json构建配置 #

Angular 18采用application builder整合了浏览器与SSR构建流程，无需单独维护server配置，需确保build节点中的SSR和本地化参数配置正确：

"build": {
  "builder": "@angular-devkit/build-angular:application",
  "options": {
    "allowedCommonJsDependencies": [
      "pdfmake/build/pdfmake",
      "file-saver",
      "pdfmake/build/vfs_fonts"
    ],
    "outputPath": {
      "base": "dist/morefont-v5",
      "server": "server" // 指定SSR输出根目录
    },
    "index": "src/index.html",
    "polyfills": [
      "src/polyfills.ts"
    ],
    "tsConfig": "tsconfig.app.json",
    "localize": ["en","fr"],
    "assets": [
      "src/favicon.ico",
      "src/assets",
      "src/manifest.webmanifest",
      "src/sitemap.xml",
      "src/robots.txt"
    ],
    "styles": [
      "src/styles.scss",
      "src/theme.scss"
    ],
    "scripts": [],
    "extractLicenses": false,
    "sourceMap": true,
    "optimization": false,
    "namedChunks": true,
    "browser": "src/main.ts",
    "server": "src/main.server.ts",
    "prerender": true,
    "ssr": {
      "entry": "server.ts",
      "tsConfig": "tsconfig.server.json" // 关联server专属配置文件
    }
  },
  "configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "namedChunks": false,
      "extractLicenses": true,
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "2mb",
          "maximumError": "5mb"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "6kb",
          "maximumError": "10kb"
        }
      ],
      "serviceWorker": "ngsw-config.json"
    }
  },
  "defaultConfiguration": ""
}

2. 更新tsconfig.server.json适配Angular 18 #

移除Angular 16+已废弃的angularCompilerOptions.entryModule配置，调整编译参数适配Node.js环境：

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "./out-tsc/server",
    "target": "ES2020", // 升级目标版本适配现代Node.js
    "types": [
      "node",
      "@angular/localize"
    ],
    "module": "commonjs" // 指定模块格式适配Node.js
  },
  "files": [
    "src/main.server.ts",
    "server.ts"
  ]
}

3. 修改代理服务器路径逻辑 #

Angular 18本地化后的SSR文件输出路径为dist/morefont-v5/server/[lang]，且入口文件会根据环境自动切换为main.js（开发）或main.mjs（生产），更新代理代码：

const express = require("express");
const path = require("path");
const fs = require("fs");

const getTranslatedServer = (lang) => {
  const distFolder = path.join(
    process.cwd(),
    `dist/morefont-v5/server/${lang}`
  );
  // 自动识别环境对应的入口文件
  const entryFile = fs.existsSync(path.join(distFolder, 'main.mjs')) ? 'main.mjs' : 'main.js';
  const server = require(`${distFolder}/${entryFile}`);
  return server.app(lang);
};

function run() {
  const port = 4000;

  const appFr = getTranslatedServer("fr");
  const appEn = getTranslatedServer("en");

  const server = express();
  server.use("/fr", appFr);
  server.use("/en", appEn);
  server.use("", appEn);

  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

run();

4. 重新构建并启动服务 #

执行以下命令完成构建与服务启动：

# 开发环境构建
ng build

# 生产环境构建
ng build --configuration production

# 启动代理服务器
node your-proxy-filename.js

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