Angular 17 SSR开发：ng serve用Vite替代server.ts的问题及解决

问题描述 #

在Angular 17服务端渲染（SSR）项目中使用ng serve开发时，HTTP请求无法正常工作——原因是前端由Vite直接提供服务，而非配置的server.ts，导致无法与SSR逻辑交互。需要配置让ng serve运行server.ts。

当前项目配置片段（angular.json） #

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:application",
      "options": {
        "outputPath": "dist/next-gen-teacher",
        "index": "src/index.html",
        "browser": "src/main.ts",
        "polyfills": [
          "zone.js"
        ],
        "tsConfig": "tsconfig.app.json",
        "assets": [
          "src/favicon.ico",
          "src/assets",
          "src/manifest.webmanifest"
        ],
        "styles": [
          "src/styles.css"
        ],
        "scripts": [],
        "server": "src/main.server.ts",
        "prerender": true,
        "ssr": {
          "entry": "server.ts"
        }
      },
      "configurations": {
        "production": {
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "500kb",
              "maximumError": "1mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "2kb",
              "maximumError": "4kb"
            }
          ],
          "outputHashing": "all",
          "serviceWorker": "ngsw-config.json"
        },
        "development": {
          "optimization": false,
          "extractLicenses": false,
          "sourceMap": true
        }
      },
      "defaultConfiguration": "production"
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "configurations": {
        "production": {
          "buildTarget": "next-gen-teacher:build:production"
        },
        "development": {
          "buildTarget": "next-gen-teacher:build:development"
        }
      },
      "defaultConfiguration": "development"
    },
    "extract-i18n": {
      "builder": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "buildTarget": "next-gen-teacher:build"
      }
    },
    "test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "polyfills": [
          "zone.js",
          "zone.js/testing"
        ],
        "tsConfig": "tsconfig.spec.json",
        "assets": [
          "src/favicon.ico",
          "src/assets",
          "src/manifest.webmanifest"
        ],
        "styles": [
          "src/styles.css"
        ],
        "scripts": []
      }
    }
  }

解决方案 #

Angular 17默认在开发模式下用Vite直接服务浏览器端以提升热更新效率，不会自动启动server.ts。要让ng serve运行SSR服务器，只需修改angular.json中serve部分的配置，为目标环境添加ssr: true选项：

修改后的serve配置 #

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "configurations": {
    "production": {
      "buildTarget": "next-gen-teacher:build:production",
      "ssr": true
    },
    "development": {
      "buildTarget": "next-gen-teacher:build:development",
      "ssr": true
    }
  },
  "defaultConfiguration": "development"
}

说明 #

• 添加ssr: true后，ng serve会同时构建浏览器端和服务器端代码，并启动server.ts作为开发服务器，所有请求都会经过server.ts处理，从而实现与SSR逻辑的正常交互。
• 如果只需要在开发模式下启用SSR，仅在development配置中添加ssr: true即可。

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