如何在构建Angular SSR项目时禁用代码压缩？

• 调整Angular构建配置（angular.json）
  找到项目中server目标的配置块，在options里添加/修改以下参数，确保SSR服务端构建不压缩代码并生成Source Map：

  "server": {
    "builder": "@angular-devkit/build-angular:server",
    "options": {
      "outputPath": "dist/[你的项目名]/server",
      "main": "server.ts",
      "tsConfig": "tsconfig.server.json",
      "optimization": false,
      "sourceMap": true,
      "buildOptimizer": false
    },
    "configurations": {
      "development": {
        "optimization": false,
        "sourceMap": true,
        "buildOptimizer": false
      }
    }
  }
  

  注：SSR的服务端构建和浏览器端是独立配置的，单独加--optimization=false可能只作用于浏览器端，必须在server配置里明确设置。

• 使用开发环境启动SSR
  不要用默认的生产环境启动脚本，改用开发环境构建并启动：

  # 手动执行构建和启动
  ng build --configuration development && ng run [你的项目名]:server:development
  node dist/[你的项目名]/server/main.js
  

  或者在package.json中新增一个开发SSR的快捷脚本：

  "scripts": {
    "serve:ssr:dev": "ng build --configuration development && ng run your-project:server:development && node dist/your-project/server/main.js"
  }
  

  之后直接运行npm run serve:ssr:dev即可。

• 在Chrome DevTools中加载源码
  启动项目后打开Chrome DevTools，切换到Sources面板：

  1. 在左侧导航栏找到webpack://节点展开
  2. 进入. -> src目录，就能看到所有未编译的component.ts文件
  3. 直接在对应文件中打断点，即可像调试浏览器端代码一样调试SSR逻辑

• 排查--optimization=false无效的原因
  如果之前加了这个参数没效果，大概率是因为启动时默认用了production配置（会强制开启优化）。必须明确指定--configuration development，或者修改server配置的默认环境为development。

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