155

I would like to use angular-cli with asp.net core and I need to know how I can change the path of the dist folder

cuppy
  • 1,661
  • 2
  • 10
  • 6

10 Answers10

253

The more current way of this is to update the outDir property in angular.json(called .angular-cli.json in old Angular CLI versions).

The ng build command argument --output-path (or -op for short) is still supported also, which can be useful if you want multiple values, you can save them in your package.json as npm scripts.

Beware: The .angular-cli.json property is NOT called output-path like the currently-accepted answer by @cwill747 says. That's the ng build argument only.

It's called outDir as mentioned above, and it's a under the apps property.

.

P.S.

(December 2017)

1-year after adding this answer, someone added a new answer with essentially same information, and the Original Poster changed the accepted answer to the 1-year-late answer containing same information in the first line of this one.

Meligy
  • 35,654
  • 11
  • 85
  • 109
114

For Angular 6+ things have changed a little.

Define where ng build generates app files

Cli setup is now done in angular.json (replaced .angular-cli.json) in your workspace root directory. The output path in default angular.json should look like this (irrelevant lines removed):

{
  "projects": {
    "my-app-name": {
    "architect": {
      "options": {
         "outputPath": "dist/my-app-name",

Obviously, this will generate your app in WORKSPACE/dist/my-app-name. Modify outputPath if you prefer another directory.

You can overwrite the output path using command line arguments (e.g. for CI jobs):

ng build -op dist/example
ng build --output-path=dist/example

S.a. https://angular.io/cli/build

Hosting angular app in subdirectory

Setting the output path, will tell angular where to place the "compiled" files but however you change the output path, when running the app, angular will still assume that the app is hosted in the webserver's document root.

To make it work in a sub directory, you'll have to set the base href.

In angular.json:

{
  "projects": {
    "my-app-name": {
    "architect": {
      "options": {
         "baseHref": "/my-folder/",

Cli:

ng build --base-href=/my-folder/

If you don't know where the app will be hosted on build time, you can change base tag in generated index.html.

Here's an example how we do it in our docker container:

entrypoint.sh

if [ -n "${BASE_PATH}" ]
then
  files=( $(find . -name "index.html") )
  cp -n "${files[0]}" "${files[0]}.org"
  cp "${files[0]}.org" "${files[0]}"
  sed -i "s*<base href=\"/\">*<base href=\"${BASE_PATH}\">*g" "${files[0]}"
fi
Christoph Lütjen
  • 5,403
  • 2
  • 24
  • 33
  • The first options for changing the output path dont work. -op and --output-path give a `Unknown option: '--output-path'` message – Martijn Hiemstra Jan 18 '22 at 15:05
  • @MartijnHiemstra - tested with angular cli 13 and it works. What's the command you've tried? – Christoph Lütjen Jan 18 '22 at 20:50
  • 1
    Thanks, that worked pretty well. Since I've got my app running in a subdirectory like http://myserver.com/TheSubDirectory I simply used ```./``` as the ```baseHref```. Now I can name the ```TheSubDirectory``` however I like and it always works – AdrAs May 05 '22 at 10:50
  • 1
    This is the answer over all the others. Including WHERE `outputPath` goes within the angular config is required information. Bonus pts too for the additional details. – Ben Racicot Jun 23 '22 at 15:33
  • Every example/tutorial for multi projects I've found missed this minor detail. Thank you. – Eldelshell Jun 20 '23 at 07:00
84

You can update the output folder in .angular-cli.json:

"outDir": "./location/toYour/dist"
Adween
  • 2,792
  • 2
  • 18
  • 20
shaun bradridge
  • 984
  • 7
  • 3
  • 20
    Is it possible to put index.html in ./location/toYour/dist and javascript bundles in a sub folder e.g. ./location/toYour/dist/bundles – Naveed Ahmed Dec 07 '17 at 20:53
  • 1
    Anyone know of any updates on customising the outDir further? css/ ts/ in separate paths – fidev Apr 30 '18 at 12:33
  • @fidev have a look at the "output" key for assets, should at least work for css files – bene-we Dec 02 '20 at 13:53
  • 1
    This answer does not work in Angular 6+ anymore. The [other answer](https://stackoverflow.com/a/50879251/10696285) below is better. – Jo Bay Dec 26 '20 at 14:42
  • The file is `angular.json` for newer Angular versions. – canmustu May 29 '23 at 22:59
56

You can use the CLI too, like:

ng build -prod --output-path=production

# or

ng serve --output-path=devroot
Marian Zburlea
  • 9,177
  • 4
  • 31
  • 37
19

The only thing that worked for me was to change outDir in in both angular-cli.json AND src/tsconfig.json.

I wanted my dist-folder outside the angular project folder. If I didn't change the setting in src/tsconfig.json as well, Angular CLI would throw warnings whenever I build the project.

Here are the most important lines ...

// angular-cli.json
{
  ...
  "apps": [
    {
      "outDir": "../dist",
      ...
    }
  ],
  ...
}

And ...

// tsconfig.json
{
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    ...
  }
}
NinjaFart
  • 1,626
  • 1
  • 20
  • 24
  • 3
    Awesome! Update for `cli 7x`, the above is done in `angular.json` and the field is `outputPath` (`tsconfig` adjustment above remains the same). Hth – EdSF Dec 13 '18 at 18:30
17

Beware: The correct answer is below. This no longer works

Create a file called .ember-cli in your project, and include in it these contents:

{
   "output-path": "./location/to/your/dist/"
}
Qw3ry
  • 1,319
  • 15
  • 31
cwill747
  • 536
  • 4
  • 11
15

for github pages I Use

ng build --prod --base-href "https://<username>.github.io/<RepoName>/" --output-path=docs

This is what that copies output into the docs folder : --output-path=docs

unos baghaii
  • 2,539
  • 4
  • 25
  • 42
9

Angular CLI now uses environment files to do this.

First, add an environments section to the angular-cli.json

Something like :

{
  "apps": [{
      "environments": {
        "prod": "environments/environment.prod.ts"
      }
    }]
}

And then inside the environment file (environments/environment.prod.ts in this case), add something like :

export const environment = {
  production: true,
  "output-path": "./whatever/dist/"
};

now when you run :

ng build --prod

it will output to the ./whatever/dist/ folder.

swestner
  • 1,881
  • 15
  • 19
  • 1
    Looks like the best answer, but Angular CLI still publishes my files in the dist-folder. Version: `angular-cli: 1.0.0-beta.21` – NinjaFart Dec 02 '16 at 20:15
  • From Angular CLI [Wiki](https://github.com/angular/angular-cli/wiki/angular-cli): _outDir (string): The output directory for build results. Default is dist/._ – hbthanki Apr 09 '18 at 16:07
  • @hbthanki Thats the cli switch, not the environment file json property – swestner May 14 '18 at 23:16
2

Another option would be to set the webroot path to the angular cli dist folder. In your Program.cs when configuring the WebHostBuilder just say

.UseWebRoot(Directory.GetCurrentDirectory() + "\\Frontend\\dist")

or whatever the path to your dist dir is.

Christian
  • 51
  • 5
1

Caution: Angular 6 and above!


For readers with an angular.json (not angular-cli.json) the key correct key is outputPath. I guess the angular configuration changed to angular.json in Angular 6, so if you are using version 6 or above you most likely have a angular.json file.

To change the output path you have to change outputPath und the build options.

example angular.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "projects": {
        "angular-app": {
            "projectType": "application",
            [...]
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/angular-app",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        [...]

I could not find any official docs on this (not included in https://angular.io/guide/workspace-config as I would have expected), maybe someone can link an official resource on this.

bene-we
  • 761
  • 11
  • 23
  • I did this and it doesnt work. I get the error: ```Schema validation failed with the following errors: Data path "" must NOT have additional properties(outputPath). ``` – Martijn Hiemstra Jan 18 '22 at 15:00