How to change the dist folder path in Angular

# How to change the dist folder path in Angular

The easiest way to change the dist folder path in Angular is to use the --output-path option when issuing the npx ng build command.

The option enables you to specify the full path to the new output directory.

shell

Copied!
npx ng build --output-path=dist/my-output-path

angular change output path using output path option

The example command above uses dist/my-output-path as the dist directory, so make sure to update it depending on your needs.

changed dist path using output path option

# Changing the dist folder path in your angular.json file

You can also change the dist folder path directly in your angular.json file.

The angular.json file is located in the root directory of your project (where your package.json file is).

angular.json

Copied!
{
  "projects": {
    "bobbyhadz-angular": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/my-output-path",
          }
        }
      }
    }
  }
}

set output path in angular json

The example sets the dist folder path to dist/my-output-path, so make sure to update it depending on your needs.

Note that the outputPath property should already be set in your angular.json file, so you can press Ctrl + F to search for the property and update its value.

The outputPath property is located under projects > your-app > architect > build > options > outputPath.

By default, the outputPath property is set to the name of your app, e.g. dist/bobbyhadz-angular.

This places the outputs of your npx ng build command in a folder named dist/bobbyhadz-angular.

The next time you run the npx ng build or npm run build commands, the new output path will be used.

shell

Copied!
npx ng build

# the same command as above
npm run build

I've also written an article on how to change the default port number in Angular.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to change the dist folder path in Angular