cómo cambiar la ruta de la carpeta dist en angular-cli después de 'ng build'

112

Me gustaría usar angular-cli con asp.net core y necesito saber cómo puedo cambiar la ruta de la carpeta dist

cuppy
fuente

Respuestas:

74

Puede actualizar la carpeta de salida en .angular-cli.json:

"outDir": "./location/toYour/dist"
shaun bradridge
fuente
14
¿Es posible poner index.html en ./location/toYour/dist y paquetes javascript en una subcarpeta, por ejemplo, ./location/toYour/dist/bundles
Naveed Ahmed
1
¿Alguien sabe de alguna actualización sobre la personalización adicional de outDir? css / ts / en rutas separadas
fidev
190

La forma más actual de esto es actualizar la outDirpropiedad en .angular-cli.json.

El ng buildargumento del comando --output-path(o -oppara abreviar) también es compatible, lo que puede ser útil si desea múltiples valores, puede guardarlos en sus package.jsonscripts como npm.

Cuidado: la .angular-cli.jsonpropiedad NO se llama output-pathcomo dice la respuesta actualmente aceptada por @ cwill747 . Ese es ng buildsolo el argumento.

Se llama outDircomo se mencionó anteriormente, y está debajo de la appspropiedad.

.

PD

(Diciembre de 2017)

1 año después de agregar esta respuesta , alguien agregó una nueva respuesta con esencialmente la misma información, y el Póster original cambió la respuesta aceptada a la respuesta de 1 año de retraso que contiene la misma información en la primera línea de esta.

Meligy
fuente
3
¿Es posible poner index.html en ./location/toYour/dist y paquetes de JavaScript en una subcarpeta, por ejemplo, ./location/toYour/dist/bundles
Naveed Ahmed
10
: D el PS es amargo
Sunil Kumar
4
mejor PD que he visto aquí
Frenkey
probablemente esté promocionando a su amigo aquí, esto es una corrupción
Alexander Borovoi
69

Para Angular 6+, las cosas han cambiado un poco.

Definir dónde ng build genera archivos de aplicaciones

La configuración de Cli ahora se realiza en angular.json (reemplazado .angular-cli.json) en el directorio raíz de su espacio de trabajo. La ruta de salida en angular.json predeterminado debería verse así (líneas irrelevantes eliminadas):

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

Obviamente, esto generará su aplicación en WORKSPACE / dist / my-app-name. Modifique outputPath si prefiere otro directorio.

Puede sobrescribir la ruta de salida utilizando argumentos de línea de comando (por ejemplo, para trabajos de CI):

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

Sa https://github.com/angular/angular-cli/wiki/build

Alojamiento de la aplicación angular en subdirectorio

La configuración de la ruta de salida le dirá a angular dónde colocar los archivos "compilados", pero sin importar cómo cambie la ruta de salida, cuando ejecute la aplicación, angular aún asumirá que la aplicación está alojada en la raíz del documento del servidor web.

Para que funcione en un subdirectorio, deberá configurar el href base.

En angular.json:

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

Cli:

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

Si no sabe dónde se alojará la aplicación en el momento de la compilación, puede cambiar la etiqueta base en index.html generado.

Aquí hay un ejemplo de cómo lo hacemos en nuestro contenedor de ventana acoplable:

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
fuente
46

También puede usar la CLI, como:

ng build -prod --output-path=production

# or

ng serve --output-path=devroot
Marian Zburlea
fuente
1
¿Es posible sobrescribir el directorio de salida en angular-cli.json ?
Sergei Rudakov
Parece que esta función se incluye con esta solicitud de extracción: github.com/angular/angular-cli/pull/1109
Daniel Patrick
17

Lo único que funcionó para mí fue cambiar outDirtanto en angular-cli.jsonAND src/tsconfig.json.

Quería mi carpeta dist fuera de la carpeta del proyecto angular. Si no cambiaba la configuración src/tsconfig.jsontambién, Angular CLI arrojaría advertencias cada vez que construyo el proyecto.

Aquí están las líneas más importantes ...

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

Y ...

// tsconfig.json
{
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    ...
  }
}
NinjaFart
fuente
2
¡Increíble! Actualización para cli 7x, lo anterior se realiza en angular.jsony el campo es outputPath(el tsconfig ajuste anterior sigue siendo el mismo). HTH
EDSF
17

Cuidado: la respuesta correcta está a continuación. Esto ya no funciona

Cree un archivo llamado .ember-clien su proyecto e incluya en él estos contenidos:

{
   "output-path": "./location/to/your/dist/"
}
cwill747
fuente
9

Angular CLI ahora usa archivos de entorno para hacer esto.

Primero, agregue una environmentssección alangular-cli.json

Algo como :

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

Y luego, dentro del archivo de entorno ( environments/environment.prod.tsen este caso), agregue algo como:

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

ahora cuando corres:

ng build --prod

saldrá a la ./whatever/dist/carpeta.

jurador
fuente
1
Parece la mejor respuesta, pero Angular CLI todavía publica mis archivos en la carpeta dist. Versión:angular-cli: 1.0.0-beta.21
NinjaFart
Desde Angular CLI Wiki : outDir (cadena): el directorio de salida para los resultados de la compilación. El valor predeterminado es dist /.
hbthanki
@hbthanki Ese es el interruptor cli, no la propiedad json del archivo de entorno
swestner
9

para las páginas de github que uso

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

Esto es lo que copia la salida en la carpeta de documentos: --output-path=docs

unos baghaii
fuente
2

Otra opción sería establecer la ruta webroot a la carpeta angular cli dist. En su Program.cs al configurar WebHostBuilder solo diga

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

o cualquiera que sea la ruta a su directorio dist.

Christian Götze
fuente