如何在NX中启动Angular应用时使用库的开发构建版本

核心原因 #

NX默认会优先读取库package.json中配置的main/module字段（通常指向生产构建产物），即使你单独构建了开发版本，若路径未正确关联，应用仍会加载生产版文件。以下是具体解决步骤：

1. 调整库的构建输出路径与package.json配置 #

针对data-access和state库，修改它们的project.json，让开发构建产物单独存放在子目录，避免和生产版混淆：

// libs/data-access/project.json
"build": {
  "executor": "@nx/angular:package",
  "options": {
    "outputPath": "dist/libs/data-access"
  },
  "configurations": {
    "production": {
      "tsConfig": "libs/data-access/tsconfig.lib.prod.json"
    },
    "development": {
      "tsConfig": "libs/data-access/tsconfig.lib.json",
      "outputPath": "dist/libs/data-access/dev" // 开发版单独输出到dev子目录
    }
  }
}

接着在库的package.json中添加开发版入口字段，方便应用识别：

// libs/data-access/package.json
{
  "name": "@your-org/data-access",
  "main": "./dist/libs/data-access/fesm2022/data-access.mjs",
  "devMain": "./dist/libs/data-access/dev/fesm2022/data-access.mjs",
  "module": "./dist/libs/data-access/fesm2022/data-access.mjs",
  "devModule": "./dist/libs/data-access/dev/fesm2022/data-access.mjs"
}

2. 让应用在开发模式下加载库的开发版 #

修改应用的project.json，配置开发模式的构建目标依赖库的开发构建：

// apps/my-app/project.json
"build": {
  "executor": "@nx/angular:browser",
  "configurations": {
    "development": {
      "tsConfig": "apps/my-app/tsconfig.app.dev.json",
      "optimization": false,
      "sourceMap": true,
      "namedChunks": true,
      // 指定依赖库的开发构建目标
      "dependencies": {
        "buildTargets": [
          "data-access:build:development",
          "state:build:development"
        ]
      }
    }
  }
},
"serve": {
  "executor": "@nx/angular:dev-server",
  "configurations": {
    "development": {
      "buildTarget": "my-app:build:development",
      "hmr": true
    }
  }
}

3. 正确启动应用（自动构建依赖库的开发版） #

直接执行以下命令，NX会自动先构建data-access和state的开发版本，再启动应用：

nx serve my-app --configuration development

4. 清理NX缓存（解决旧产物复用问题） #

如果之前的缓存导致应用仍加载生产版，先重置NX缓存：

nx reset

再重新执行上述serve命令。

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