Autenticación con Angular y Firebase
Autenticación con Angular y Firebase
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!


En este tutorial vamos a ver lo sencillo que es poner una aplicación Angular 2 en producción con Angular-cli.

Angular-cli es una potente herramienta que nos permite desarrollar aplicaciones con Angular 2 de forma rápida, componentes, providers, pipes y todo lo que necesites (excepto rutas en la actualidad), al fin y al cabo su misión es realizar las tareas más repetitivas para que nos centremos en lo importate, el desarrollo de nuestras aplicaciones.

Cuando desarrollamos una aplicación con Angular 2 nos llenamos de archivos, tenemos para cada archivo .ts un .js y un js.map aparte de todo el html y demás.

Pues bien, Angular-cli tiene un comando que te permite generar un bundle con todo el código para que con un sencillo index.html que él te construye puedas tener toda tu aplicación lista y super optimizada.

[button-red url=”https://www.cursosdesarrolloweb.es/course/aprende-angular-2-desde-0/” target=”_blank” position=”center”] Aprende a desarrollar aplicaciones con Angular 2 desde 0 con la versión estable [/button-red]
Aunque hemos dicho que Angular-cli en la actualidad no soporta la generación de rutas, eso no significa que no las podamos utilizar, podemos y debemos, otra cosa es que el comando actualmente no esté disponible.

Instalar Angular-cli

Para instalar Angular-cli simplemente ejecuta el siguiente comando en la terminal, el cual creará de forma global el comando ng, éste nos servirá para crear todo lo que necesitemos en nuestras aplicaciones.

Una vez finalice, si ejecutas el comando ng verás todos los comandos que tenemos disponibles.

Primer proyecto con Angular-cli

Para empezar un nuevo proyecto simplemente ejecuta el siguiente comando, el cual creará el directorio super-app con todo lo necesario para empezar.

Nosotros normalmente trabajaremos en el directorio src, el cual tiene el siguiente aspecto, que cómo podrás ver es algo típico en cualquier aplicación con Angular 2, módulos, componentes etc.
Angular 2 y angular-cli

Angular 2 en produccion con angular-cli

Una vez hayas desarrollado tu aplicación y lo tengas todo preparado, ejecuta el siguiente comando para que se generen los bundles necesarios para lanzar nuestra aplicación en producción con Angular 2 optimizada.

Esto habrá creado un nuevo directorio llamado dist en la raíz del proyecto optimizado para producción.
Angular 2 producción
Cómo podemos ver, la cosa ha cambiado y bastante con respecto al directorio src, ahora lo único que necesitas para que tu aplicación funcione es subir el directorio dist a tu servidor, con eso tendrás Angular 2 en producción con angular-cli, más fácil imposible.

Si tienes algún error al ejecutar el comando ng build –prod simplemente elimina el directorio dist y vuelve a ejecutarlo, normalmente con eso es suficiente.

Si trabajas bajo apache y tienes problemas con las urls al actualizar la página simplemente crea un archivo .htaccess en la raíz del proyecto y añade lo siguiente.

De esta forma nuestro servidor sabrá que el archivo que hace el bootstrap siempre es el index.html y evitaremos este tipo de problemas.