In Angular CLI, how I can change the path of the dist folder?
10 Answers
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.jsonproperty is NOT calledoutput-pathlike the currently-accepted answer by @cwill747 says. That's theng buildargument only.It's called
outDiras mentioned above, and it's a under theappsproperty.
.
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.
2 Comments
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
5 Comments
Unknown option: '--output-path' message./ as the baseHref. Now I can name the TheSubDirectory however I like and it always worksoutputPath goes within the angular config is required information. Bonus pts too for the additional details.You can update the output folder in .angular-cli.json:
"outDir": "./location/toYour/dist"
5 Comments
angular.json for newer Angular versions.You can use the CLI too, like:
ng build -prod --output-path=production
# or
ng serve --output-path=devroot
2 Comments
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",
...
}
}
1 Comment
cli 7x, the above is done in angular.json and the field is outputPath (tsconfig adjustment above remains the same). HthAngular 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.
3 Comments
angular-cli: 1.0.0-beta.21Caution: 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 and 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.
1 Comment
Schema validation failed with the following errors: Data path "" must NOT have additional properties(outputPath).