how to change the dist-folder path in angular-cli after 'ng build'
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 calledoutput-path
like the currently-accepted answer by @cwill747 says. That's theng build
argument only.It's called
outDir
as mentioned above, and it's a under theapps
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.
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
You can update the output folder in .angular-cli.json:
"outDir": "./location/toYour/dist"
You can use the CLI too, like:
ng build -prod --output-path=production
# or
ng serve --output-path=devroot