新建NX Monorepo中NestJS应用代码变更后无法自动重载问题

问题重现步骤 #

• 创建NX Monorepo：

  npx create-nx-workspace xyz
  

  选择Angular -> Integrated Monorepo -> 命名为"foo" -> 选择Webpack或esbuild
• 添加Nest插件并创建API应用：

  nx add @nx/nest --no-daemon
  nx g @nx/nest:app apps/my-api
  

• 启动API：

  nx serve my-api
  

• 修改代码后，API不会自动重载，必须重启服务才生效，NX v19版本无此问题。

解决方案 #

1. 显式启用文件监听 #

NX 20+对文件监听的默认配置有所调整，可在启动命令中直接指定监听：

nx serve my-api --watch

也可在项目的project.json中，将serve目标的watch属性设为true：

{
  "targets": {
    "serve": {
      "executor": "@nx/nest:serve",
      "options": {
        "watch": true,
        "buildTarget": "my-api:build"
      }
    }
  }
}

2. 优化构建目标配置 #

检查project.json里的build目标，确保启用监听和增量构建：

{
  "targets": {
    "build": {
      "executor": "@nx/webpack:webpack",
      "options": {
        "outputPath": "dist/apps/my-api",
        "main": "apps/my-api/src/main.ts",
        "tsConfig": "apps/my-api/tsconfig.app.json",
        "assets": ["apps/my-api/src/assets"],
        "watch": true,
        "incremental": true
      }
    }
  }
}

3. 彻底停止NX Daemon #

即使安装时使用了--no-daemon，Daemon仍可能在后台运行，尝试完全停止后再启动服务：

nx daemon --stop
nx serve my-api

4. 手动验证热重载逻辑 #

在apps/my-api/src/main.ts中确认热重载逻辑是否生效：

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app/app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(process.env.PORT ?? 3000);

  if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => app.close());
  }
}

bootstrap();

5. 临时降级NX版本 #

若上述方案均无效，可暂时降级到NX v19版本：

npm install -D nx@19

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