Nada mejor que tener un buen tutorial a la mano cuando quieres hacer algo de lo que no tienes ni idea.

Como es mi caso ahora mismo, que acabo de hacer una app en Angular y quiero ponerla online, pero no sé por dónde empezar.

Pero bueno, ya que me voy a informar, escribo este artículo y así te lo enseño a ti.

Lo primero

Pues tener la app hecha.

Si no, pues hazla y luego vuelves.

Lo segundo

Bueno pues a esta altura de la película, está mega claro que sabes qué es npm install y que ya lo has hecho.

Con eso básicamente has descargado las dependecias de tu proyecto y puesto todo a punto.

Seguramente habrás hecho varias veces npm start o ng serve para ir mirando tu aplicación en local.

Si has hecho nada de eso pues me parece raro, porque se supone que si quieres subir una app de Angular al servidor es porque sabes de qué estás hablando y que ya has hecho esas cosas.

Si no has hecho npm install, hazlo ahora.

También puedes hacer npm i, que es lo mismo pero abreviado.

Lo tercero

Precompilar el tema para poder subirlo.

Yo no tenía ni idea de que esto va así, me acabo de enterar leyendo en la guía oficial de Angular.

Pero es mucho más sencillo de lo que pensaba, simplemente tienes que hacer:

ng build --prod

Eso de prod es porque se va a activar el modo producción.

Al ejecutar dicho comando, se te va a generar una carpeta en la raíz de tu app, que se llama dist.

Pues muy bien, dentro de esta encontrarás todo el contenido precompilado para que tu app funcione de lujo.

Tienes que cogerlo y ponerlo en la raíz de tu dominio.

¿Pero qué contenido?

Pues todo el bloque de archivos, a la misma altura que el index.html.

Cómo poner una app de Angular en el servidor

Con cualquier herramienta.

Yo voy a usar FileZilla.

Cómo poner una app de Angular en el servidor 1

Y así de simple.

¿Qué pasa si no quiero ponerlo en la raíz del sitio?

En ese caso debes especificar en qué carpeta está tu url base.

¿Dónde se hace eso?

Pues, según la guía, te vas al index.html y por ahí, en el <head> de la página, debe estar como:

<base href="/">

Le pones la ruta que tú quieras, por ejemplo:

<base href="/cosas/spa/angular/aqui/">

Haces el ng build --prod, y lo subes, como se indicó antes.