how to change the dist-folder path in angular-cli after ng build

Question

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

User · Answer

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        quot  schema quot    quot   node modules  angular cli lib config schema json quot        quot version quot   1       quot projects quot              quot angular-app quot                  quot projectType quot    quot application quot                                  quot architect quot                      quot build quot                          quot builder quot    quot  angular-devkit build-angular browser quot                        quot options quot                              quot outputPath quot    quot dist angular-app quot                            quot index quot    quot src index html quot                            quot main quot    quot src main ts quot                                  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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

for github pages I Use   ng build --prod --base-href  https    lt username gt  github io  lt RepoName gt    --output-path docs   This is what that copies output into the docs folder   --output-path docs

User · Answer

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   github com angular angular-cli wiki 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  lt base href       gt   lt base href     BASE PATH    gt  g     files 0    fi

User · Answer

The more current way of this is to update the outDir property in  angular-cli json  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

User · Answer

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

User · Answer

You can use the CLI too  like   ng build -prod --output-path production    or  ng serve --output-path devroot

User · Answer

You can update the output folder in  angular-cli json    outDir      location toYour dist

[angular] how to change the dist-folder path in angular-cli after 'ng build'

Caution: Angular 6 and above!

Examples related to angular

Examples related to angular-cli