The cp is a Linux command which stands for copy, it is used to copy content from one directory to another. It is commonly used on Linux and other UNIX based operating systems.
In this guide, we will discuss how to force the ‘cp’ command to overwrite the complete directory instead of creating one inside it.
How to perform copy operation after Angular build is completed?
In the Angular project, during a requirement, I need to copy the dist folder to some other directory. But, this needs to be done immediately after the dist folder for the application is created.
To achieve this, we can use the "postbuild" script in the package.json file. The "postbuild" script can have copy commands which will be executed after the build command is executed successfully.
Inside the package.json file you can have these scripts as shown below:
...
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build && npm run postbuild",
"postbuild":"cp -R ./dist/my-ng-app ../deployment-folder/my-ng-app",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
...Above, we have added the "postbuild" script and updated the "build" command to execute postbuild.
Now, when you execute the "npm run build" command, it will copy the dist/my-app content into the one-step-back location ../deployment-folder/my-app
Common issues while using ‘cp’ command
With ‘cp’ command you may face few issues which we are going to discuss.
Issue 1) ‘cp’ is not recognized as an internal or external command
While executing the "postbuild" command, you will notice an error in the npm command line saying:
“‘cp’ is not recognized as an internal or external command”
This is obvious to show up on Windows operating systems, as cp is a Linux command and Windows OS is not aware of this if you run on CMD Command Prompt or Powershell.
Solution: Use the “Bash” command line.
To tackle this issue on Windows, you can hit or run "Bash" to switch to Git Bash to execute the cp commands very easily.
Make sure you have installed and configured Git bash your system to use Bash command.
If you are using Visual Studio (VS) Code IDE, you can easily switch to bash using the + icon on the terminal console.
Issue 2) ‘cp’ command creates a new directory inside the target
If you execute the ‘cp’ command provided above, it will recursively copy the files and folder to the destination. But, the second time, if you execute the same command, it will create a directory inside the destination folder.
Currently, we’re using the -R flag which means “copying the entire directory structure recursively”.
If you want completely replace the existing folder with new files, then you have two options:
Option 1) Use -T flag
You can add -T flag so the command will become:
"cp -TR ./dist/my-ng-app ../deployment-folder/my-ng-app"Now the complete directory and each of its file will replaced.
Options 2) Remove the current directory of the execute copy.
Alternatively, you can completed remove the destination directory before executing the ‘cp’ command as shown below:
"postbuild":"rm -rf ../deployment-folder/my-ng-app/* && cp -TR ./dist/angular-crud-app ../deployment-folder/my-ng-app",
The -f flag will forcefully remove the files and directories.
To sum-up this was a quick go-thorugh of a usecase while Angular development. Hope this will be helpful.
