Angular esencial

Procesar y publicar el proyecto

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
En esta lección vamos a ir más allá de los elementos visuales de Renderer 2 y explotaremos al máximo su verdadero potencial para controlar el DOM de un documento sin afectar el encapsulamiento de los componentes de Angular.
04:17

Transcripción

Una vez que tengas lista tu aplicación, preparado para publicar, que ya has revisado que todo esté funcionando correctamente, vamos a tener un problema. Si estás trabajando con tu aplicación de manera normal, simplemente utilizando el servidor local, por ejemplo, acá yo tengo una aplicación que está haciéndolo, donde estoy trabajando en el servidor local, en el puerto 4200 a través del comando'ngserv'. En este caso, yo estoy trabajando con una aplicación bastante simple, pero si examinamos un poco los archivos que están detrás de esta aplicación, que son los que se están generando a partir de la línea de comando de Angular, vemos que tenemos bastantes archivos, en este caso estoy trabajando con 157 MB. Por supuesto que a la hora de publicar, nosotros no podemos enviar una aplicación de 157 MB que simplemente trabaje una pantalla y tenga una lista. Lo que tenemos que hacer es procesar nuestra aplicación y compilarla para que pueda funcionar y esté lista para trabajar en un entorno de Internet. En este punto, estamos trabajando únicamente un modo de desarrollo. Vamos a ir a nuestra aplicación y acá yo estoy ejecutando dentro de la consola de Visual Studio el servidor, así que lo voy a detener presionando dos veces Cntrl + C, Cntrl + C, y esto va a detener el servidor y voy a llamar el comando'ng build', y esto va a compilar mi aplicación. Básicamente, lo que va a hacer es que va a preparar todos los archivos para que pueda funcionar en un entorno de producción y que tengamos un archivo listo optimizado para poder funcionar en Internet. Una vez que termine el proceso –y puede tardar bastante, dependiendo de la cantidad de librerías que tengas instaladas en tu proyecto–, vamos a tener una carpeta con el nombre'dist' donde va a estar nuestra aplicación en un modo de distribución para publicar. Recordemos que durante el proceso de desarrollo nosotros estábamos trabajando en archivos en el formato TS. Esos archivos TS son TypeScript. Los archivos TS, aunque son bastante funcionales y como ya has visto a lo largo de este curso son muy funcionales para poder hacer aplicaciones robustas, en este caso no nos van a funcionar para poder desplegarlo en un navegador. TypeScript no es compatible con un navegador. Nosotros vamos a compilar el código que está dentro de TypeScript y vamos a generar un archivo JavaScript que sí es compatible con un navegador. En este caso, dentro de nuestro archivo de distribución, vamos a ver que tenemos nuestra aplicación y todos los elementos de ella dentro de archivos JS. En este caso, también se han incluido archivos. map para poder ayudar al proceso de depuración. Todas las plantillas y los elementos'html'están dentro del archivo correspondiente. Y en caso de que tuviéramos algún archivo dentro de la carpeta 'Assets', en este caso no se encuentra ningún archivo, pero si tuviéramos un archivo dentro de esta carpeta, lo podríamos exportar. Por ejemplo, yo voy a copiar esta carpeta'index'y la voy a pegar acá, dentro de'Assets', simplemente para tener un archivo dentro de ella. Y voy a volver a ejecutar el proceso de compilación, simplemente llamando otra vez a 'ng build'. Y ahora vemos que el resultado, vemos que la aplicación que se acaba de volver a crear, en este caso, incluye esa carpeta'Assets'donde se encuentran los archivos correspondientes. Por eso, nosotros podemos utilizar la carpeta'assets'para enlazar con cualquier imagen o archivo externo que se va a incluir dentro de nuestra aplicación. Ahora tenemos una aplicación lista para publicar con un tamaño bastante distinto –vemos acá que en este caso mide 5 MB– donde se incluyen todas las librerías y todos los elementos relacionados con nuestra aplicación. Siempre que vayas a publicar tus aplicaciones, aunque hayas trabajado en modo de depuración durante todo el tiempo y todo funcione correctamente, siempre debes generar este proceso de'build' dentro de la carpeta'Dist'. Y todo lo que está dentro de ella es lo que sí vas a poder subir al servidor de producción.

Angular esencial

Aprende a crear aplicaciones con Angular y avanza poco a poco en su uso, empezando por la instalación, configuración y arquitectura hasta la publicación final de una aplicación.

4:27 horas (35 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:29/06/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.