Angular 2 en el servidor de producción

En los últimos meses he visto varios comentarios preguntando como usar Angular 2 en el servidor de producción. No habia hecho un tutorial al respecto porque no existía una forma simple para hacerlo. Hasta ahora.

¿Que necesitamos?

En este tutorial vamos a usar una Angular CLI (v1.0.0-beta.15) y Angular 2 (RC7, la versión final).

Angular CLI

Para saber que version de Angular CLI tenemos vamos a correr el siguiente comando en nuestra terminal:

ng --version

El resultado debe ser algo como angular-cli: 1.0.0-beta.15. Si tenemos una versión anterior de Angular CLI, debemos actualizarla.

Si no la tenemos instalada, la podemos instalar con (debemos tener node y npm instalados),

npm install -g angular-cli

¿Como actualizar Angular CLI?

Para actualizar Angular CLI debemos actualizar el paquete global y el paquete local (el paquete de nuestra aplicación)

Para actualizar el paquete global:

npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@latest

Para actualizar el paquete local:

rm -rf node_modules dist tmp
npm install --save-dev angular-cli@latest
ng init

Es importante usar sudo si estamos en mac / linux.

Crear el bundle para producción

Para crear el «bundle», o el paquete donde los archivos necesarios para correr Angular van a estar, vamos a la carpeta donde se encuentra nuestra aplicación y corremos:

ng build --prod

Este comando va a crear unos archivos en la carpeta /dist de nuestra aplicación.

Los archivos principales son:

  • index.html: El punto de entrada de nuestra aplicación
  • main.[hash].bundle.js: Todas las dependencias de nuestra aplicación en un archivo minimizado
  • styles.[hash].bundle.js: Los estilos que tengamos en nuestra aplicación

Ahora que ya tenemos nuestro ‘bundle’ simplemente copiamos toda la carpeta /dist a nuestro servidor.

Ultimo paso

El archivo index.html va a tener una línea parecida a esta:

<!-- Mostrada en varias lineas por claridad -->
<script type="text/javascript" src="inline.js"></script>
<script type="text/javascript" src="styles.2c9d565356c6380ff49a.bundle.js"></script>
<script type="text/javascript" src="main.a64e334647390d972423.bundle.js"></script>

El cambio que tenemos que hacer (si los archivos no están en la raíz del directorio) es actualizar los caminos (src) de estos archivos para que apunten a donde están los mismos.

Conclusiones

Con estos simples pasos podemos crear un ‘bundle’ de las dependencias de nuestra aplicación y tener Angular 2 en el servidor de producción.

Este video es parte del curso de angular 2 en español

13 enero, 2017

6 respuestas en "Angular 2 en el servidor de producción"

  1. Exelente post, gracias por crearlo me ha servido mucho.

  2. Es necesario que tenga instalado Node en el server de producción?

    Creo que no pero igual pregunto para estar seguro.

  3. gracias, me estaba volviendo loco!!

  4. Hola !! una consulta.. luego de crear el bundle, el antivirus reporta phishing con el archivo main. Nos paso con AVG y con Avast. Alguna idea? Gracias de antemano!

Deja un mensaje

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Aprende Fácilmente© Todos los derechos reservados