CODEWITHSUNDEEP
angularnrwl-nxangular-librarynrwl
SKL
SKL

Reputation: 1453

How to Change dist Directory Structure After NX Build for Angular Publishable Libraries

I'm working on an NX Angular application with multiple publishable libraries. Currently, after running nx build, the dist directory has the following structure:

current:

dist
└── libs
    └── ui-kit
        └── components
            └── button

desired:

dist
└── ui-kit
    └── button

*project.json:

...
  "projectType": "library",
  "targets": {
    "build": {
      "executor": "@nx/angular:package",
      "outputs": [
        "{workspaceRoot}/dist/{projectRoot}"
      ],
      "options": {
        "project": "libs/ui-kit/ng-package.json"
      },
      "configurations": {
        "production": {
          "tsConfig": "libs/ui-kit/tsconfig.lib.prod.json"
        },
        "development": {
          "tsConfig": "libs/ui-kit/tsconfig.lib.json"
        }
      },
      "defaultConfiguration": "production"
    },
...

image:

enter image description here

Is there a way to change the default output directory structure after building the libraries? Specifically, I want to avoid the additional libs and components layers in the dist folder.

I've checked the nx.json and project.json files but haven't found a clear way to adjust the path in the build process.

Any advice or guidance on how to achieve this would be greatly appreciated. Thanks!

Upvotes: 1

Views: 422

Answers (1)

Pádraig Galvin
Pádraig Galvin

Reputation: 1175

If you only need to move a folder and doing so doesn't break any internal references in your code, you can use the nx:run-commands executor to run the build and commands to move the files as required after.

The nx:run-commands allows you to run any commands you want as a NX target.

If you rename your current build task to something else, such as build-angular, you can create a new task called build. The new task simply needs to set the executor and commands to run:

"targets": {
  "build-angular": {
    // Existing Angular build config...
  },
  "build": {
    "executor": "nx:run-commands",
    "options": {
      "commands": [
        "npx nx run ui-kit:build-angular",
        "mkdir dist/ui-kit",
        "mv dist/libs/ui-kit/components/button dist/ui-kit/button",
        "rm -r dist/libs"
      ]
    }
  }
},

Alternatively, you can keep the build name for the Angular task and give the new target a different name, like build-move.

You may need to adapt the commands above depending on your operating system. If you want to make them cross-platform, you could use inline evaluated JavaScript with Node.js to make the required changes, using something like this:

"commands": [
  "npx nx run ui-kit:build-angular",
  "node -e \"fs.mkdirSync('dist/ui-kit');\"",
  "node -e \"fs.renameSync('dist/libs/ui-kit/components/button', 'dist/ui-kit/button');\"",
  "node -e \"fs.rmSync('dist/libs', { recursive: true });\""
];

You could also create a script to make the changes and call that from the task:

"commands": [
  "npx nx run ui-kit:build-angular",
  "node post-build-move.js"
];

Upvotes: 0

Related Questions