如何在Nx workspace的project.json中配置双构建配置（类angular.json）

在Nx里无需复刻angular.json的双project节点结构，通过给同一项目配置多个build目标就能实现两种构建逻辑，更贴合Nx的设计思路。以下是具体修改步骤：

1. 打开目标项目的project.json #

找到项目根目录下的project.json（通常路径为apps/angular-app/project.json）

2. 保留已有的Single-SPA构建配置 #

保留迁移后自动生成的build目标（对应原angular.json中的angular-app-single），示例配置如下：

"targets": {
  "build": {
    "executor": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.single-spa.config.js"
      },
      "main": "apps/angular-app/src/main.single-spa.ts",
      "outputPath": "dist/apps/angular-app-single",
      // 其他Single-SPA相关配置（如styles、assets等）
    },
    "configurations": {
      "production": {
        // 生产环境配置
      }
    }
  },
  // 保留原有的serve、test等targets
}

3. 添加本地开发构建目标 #

在targets节点下新增build-local目标（对应原angular.json中的angular-app），使用Angular DevKit原生builder并指向main.ts入口：

"build-local": {
  "executor": "@angular-devkit/build-angular:browser",
  "options": {
    "main": "apps/angular-app/src/main.ts",
    "outputPath": "dist/apps/angular-app",
    "index": "apps/angular-app/src/index.html",
    "polyfills": "apps/angular-app/src/polyfills.ts",
    "tsConfig": "apps/angular-app/tsconfig.app.json",
    "assets": [
      "apps/angular-app/src/favicon.ico",
      "apps/angular-app/src/assets"
    ],
    "styles": [
      "apps/angular-app/src/styles.css"
    ]
  },
  "configurations": {
    "production": {
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "500kb",
          "maximumError": "1mb"
        }
      ],
      "outputHashing": "all"
    },
    "development": {
      "buildOptimizer": false,
      "optimization": false,
      "vendorChunk": true,
      "extractLicenses": false,
      "sourceMap": true,
      "namedChunks": true
    }
  },
  "defaultConfiguration": "production"
}

4. （可选）添加本地开发服务目标 #

如果需要为本地构建单独配置启动命令，在targets下新增serve-local：

"serve-local": {
  "executor": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "angular-app:build-local:development"
  },
  "configurations": {
    "production": {
      "browserTarget": "angular-app:build-local:production"
    }
  }
}

5. 执行构建/启动命令 #

• 构建Single-SPA版本：nx build angular-app
• 构建本地开发版本：nx run angular-app:build-local
• 启动本地开发服务：nx run angular-app:serve-local

替代方案：创建两个独立Nx项目 #

如果一定要完全复刻angular.json的双project结构，可按以下步骤操作：

1. 执行命令添加新项目：

nx generate @nx/angular:application angular-app-single --directory=apps/angular-app-single --no-interactive

2. 修改新项目的project.json，将sourceRoot指向原项目源码目录：

"sourceRoot": "apps/angular-app/src"

3. 为新项目配置Single-SPA构建参数，原项目保留本地开发配置。

不过这种方式会产生冗余配置，更推荐使用多targets的方案。

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