Angular Universal集成报错：server.ts未纳入TypeScript编译

问题根源 #

你修改了tsconfig.app.json但无效，是因为Angular Universal的server端构建使用的是单独的tsconfig.server.json（在angular.json的server构建配置中指定），而非浏览器端的tsconfig.app.json。另外你的server.ts中environment的导入路径也存在问题。

解决方案 #

1. 修正src/tsconfig.server.json配置 #

确保server.ts被纳入该配置的files或include数组中，示例配置如下：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/server",
    "target": "es2016",
    "types": ["node"]
  },
  "files": [
    "main.server.ts",
    "../server.ts"
  ],
  "include": [
    "../server.ts",
    "**/*.d.ts"
  ]
}

2. 修正server.ts中的environment导入路径 #

当前导入路径'environments/environment'是浏览器端的相对路径，server.ts在项目根目录，需要改为根相对路径：

// 替换原导入语句
import { environment } from './src/environments/environment';

3. 清理缓存并重新构建 #

执行以下命令清理构建缓存和产物，避免旧配置干扰：

# macOS/Linux
rm -rf dist node_modules/.cache

# Windows
rmdir /s /q dist && rmdir /s /q node_modules\.cache

然后重新执行构建命令：

npm run build:ssr

额外检查 #

确认angular.json中server构建的输出路径与浏览器端区分开，避免文件覆盖：

"server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
    "outputPath": "dist/functions/server",
    "main": "server.ts",
    "tsConfig": "src/tsconfig.server.json"
  }
}

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