Angular | How to Move/ Copy Folder/Files During Project Build Process

In this post, we’ll quickly discuss how to move or copy a resource like the dist folder or some files from/to the assets folder to some other target folder.

During the build process in the Angular project where we simply run the $ ng build or $ npm run build command to create the distributable source code of the application in a dist folder.

In situations we may need to put or copy the dist folder from its location to some other project directory or location but only after the build process is successfully completed. This method is used to copy the files folder after the build process is completed.

Solution

To perform this operation we simply need to add the "postbuild" script in the package.json file.

For example, you want to copy the “~dist/angular-material-bottom-sheet-app” to the “~mydistapp/dist” then update the package.json file as shown below:

From

....
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    .....
  },

 

To

... 
 "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build && npm run postbuild",
    "postbuild":"xcopy /s \".\/dist\\angular-material-bottom-sheet-app\" \".\/mydistapp\\dist\" \/Y",
      .....
  },
....

 

We have added the "postbuild" script to copy one folder to the other. The Y will force replace the files to a target folder. Also updated the “build” script to include “postbuild” to run this automatically during the “npm run build” command.