Compilando la aplicación

Este es un artículo muy breve, en el que vamos a aprender a compilar una aplicación escrita con Angular 6. Sé que ya hablamos de esto en el curso introductorio de Angular 5. Sin embargo, en la nueva versión hay un pequeño cambio, que debemos tener en cuenta, o nuestra aplicación podría no funcionar en producción.

No es grave, pero sí importante.

Además, vamos a descubrir una mejora, que nos ayudará a «quitarnos cosas de la cabeza».

La compilación es uno de los procesos más importantes de la creación de una aplicación Angular. Si nuestra aplicación no llega a funcionar en producción, no importa lo genial que sea o lo bien hechaa que esté. No sirve para nada. Por esta razón, si los fabricantes de Angular (leáse Google) sacan novedades en este terreno, las iremos incorporando aquí.

LA RUTA BASE

Cuando aprendimos a compilar en Angular 5 (lo ves en este artículo), insitíamos en que, una vez compilada la aplicación, teníamos que editar el archivo index.html, sustituyendo la línea <base href="/"> por <base href="./">.

En Angular 6 podemos hacer un cambio en el archivo package.json de nuestro proyecto, de modo que, cuando compilemos (las veces que sea necesario, según las pruebas que hagamos), nos haga este cambio de modo automático. Para ello, sustituimos la línea:

"build": "ng build --prod",

por

"build": "ng build --prod --base-href ./",

Y ya está. Cuando, en la consola, teclees npm run build te hará la compilación adaptando el archivo index.html, para que no tengas que ocuparte de eso cada vez que compiles. Y ahora, si has experimentado un poco, me dirás que, en realidad, esa opción ya estaba disponible en versiones anteriores, como Angular 5, que no es una novedad. Pues sí. Tienes razón. Sin embargo, experimentando con diversas instalaciones del CLI, comprobé que, en algunas versiones del mismo, o bajo determinadas circunstancias, no funcionaba, así que decidí callármelo. En Angular 6, hasta ahora, me ha funcionado correctamente en todas las pruebas.

Por cierto. El modificador --prod es lo que asegura que la compilación de tu aplicación para distribuir se ejecute en modo producción, en lugar de en modo desarrollo. Optimiza el número de ficheros, y el tiempo de ejecución.

EL DIRECTORIO dist

Esta es otra novedad que encontramos en Angular 6. El directorio dist no se destruye automáticamente si vuelves a editar la aplicación. Tienes que borrarlo manualmente. Por cierto. Los archivos de producción ya no se te colocan, directamente, dentro de dist, sino que crea un directorio con el mismo nombre del directorio original, así que no te asustes si no ves los archivos. Están ahí, dentro de un subdirectorio, y tienes que sacarlos para subirlos a tu servidor.

LA CARGA PEREZOSA

Esto sí es un problema si no lo tienes en cuenta. Si tu aplicación tiene módulos que se cargan en diferido, NO deben, de ningún modo, ser importados en el AppModule. En Angular 5 esto daba igual. En Angular 6 te da igual en desarrollo, pero, al compilar para producción, tu aplicación no funcionará. Veamos de que hablo. Hasta ahora, nuestro módulo principal (app.module.ts) tiene el siguiente listado:

Como el MembersModule y sus componentes se cargan en diferido (échale un vistazo a app-routing.module.ts), debemos eliminarlos de aquí (borrando las dos líneas resaltadas). Si no lo haces, la versión en producción no funcionará (aunque en desarrollo sí lo haga). En lo sucesivo, en un fichero de módulo (*.module.ts) nunca importaremos otros módulos que se carguen en diferido.

   

Deja un comentario