Angular Change the Dist Folder Path

By default, the dist folder is located at the root of your Angular project directory. However, there may be cases where you want to change the path of the dist folder, for example, if you want to deploy your Angular application to a specific directory on your web server. At that time, you need to change dist folder path on web server.

In this tutorial, you will learn how to change the dist folder path in an Angular application.

How to Change the Dist Folder Path in Angular

Here are some ways to change the dist folder path in Angular:

Method 1: Modify angular.json Output Path

To change the dist folder path in Angular, you can change the outputPath in the angular.json file, which is located at the root directory of the project.

Here is an example of to change dist folder path in angular by setting outputPath:

"architect": {
  "build": {
    "options": {
      "outputPath": "custom-dist-folder"
    }
  }
}

Method 2: Using Angular CLI Flags

You can specify the –outputPath flag when using the Angular CLI build command. This will temporarily override the path for that specific build.

ng build --prod --outputPath custom-dist-folder

Method 3: Custom Build Scripts

Or, you can also create a custom build script in your package.json to define the build process, including the outputPath. For example:

"scripts": {
  "build-custom": "ng build --prod --outputPath custom-dist-folder"
}

Next, Run the custom script using:

npm run build-custom

Method 4: Using Environment Variables

Using enviroment variable, you can dynamically set the outputPath based on the environment. This approach is more advanced and requires you to write a custom script that sets variables before running the build.

For example, you can create a script in your package.json:

"scripts": {
  "build-dev": "OUTPUT_PATH=dist-dev ng build --prod",
  "build-prod": "OUTPUT_PATH=dist-prod ng build --prod"
}

Then, you can set the outputPath based on the script you want to run:

npm run build-dev

This will set the outputPath to dist-dev.

Conclusion

That’s it; you have learned 4 ways to change the dist folder path in angular project.

Recommended Tutorials