Cómo optimizar tu flujo de trabajo con múltiples proyectos en Angular

Cuando creamos aplicaciones en Angular, dividir el código en módulos ayuda a mantener todo organizado en su sitio, pero a veces necesitamos ir un paso más allá y separar el código en proyectos independientes para tener cada área bien aislada.

Por defecto, Angular CLI genera una sola aplicación inicial, pero ¿qué pasa cuando nuestro proyecto empieza a crecer? Tal vez comenzamos con una web básica, pero luego necesitamos crear una landing page y queremos compartir componentes entre ambas páginas mediante una librería. Este es el escenario ideal para usar un Angular Workspace.

Lee más sobre Angular Workspaces en la documentación oficial.

¿Qué es un Workspace?

Un workspace de Angular nos permite dividir y organizar nuestro código en múltiples proyectos. Esto facilita la gestión de dependencias, permite compilar con un único npm install para todas las aplicaciones y compartir node_modules, manteniendo todo junto en un único repositorio.

Cómo usar Workspaces

Para empezar a usar un workspace, primero debemos crear la estructura principal. Por ejemplo, imaginemos que nuestra empresa se llama amazing_company y tiene varios proyectos dentro.

Ejecutamos el comando ng new usando la bandera --create-application=false para no generar la aplicación por defecto:

ng new amazing_company --create-application=false

Esto crea una estructura de archivos con package.json, tsconfig, etc., todo lo necesario para gestionar, registrar y crear nuevos proyectos usando la CLI.

¿Cuáles son las diferencias?

Veamos las diferencias entre ejecutar ng new myproject y usar la bandera --create-application=false.

Esta es la lista de archivos que genera ng new myproject, con el directorio src y una aplicación de ejemplo lista para empezar a programar:

angular.json package.json src tsconfig.spec.json
karma.conf.js package-lock.json tsconfig.app.json
node_modules README.md tsconfig.json

Con la bandera --create-application=false, la CLI solo genera los archivos mínimos para gestionar el proyecto:

angular.json package.json README.md
node_modules package-lock.json tsconfig.json

Perfecto, con las diferencias claras, el siguiente paso es añadir proyectos a nuestro workspace.

Cómo añadir proyectos al Workspace

Vamos a añadir tres nuevos proyectos a nuestro workspace:

• Dos aplicaciones: amazing_web y amazing_landing.
• Una librería: amazing_library, para compartir componentes entre ambas aplicaciones.

Primero, creamos las dos aplicaciones usando el comando ng g (la versión corta de generate) con el tipo application y el nombre de cada proyecto:

ng g application amazing_landing
ng g application amazing_web

La CLI crea el directorio projects y registra las aplicaciones en su interior:

angular.json package.json projects tsconfig.json
node_modules package-lock.json README.md
dany@dany:~/Desktop/amazing_company$ cd projects/
dany@dany:~/Desktop/amazing_company/projects$ ls
amazing_landing amazing_web

Ya tenemos nuestras dos aplicaciones generadas. A continuación, creamos una librería para compartir código entre ellas.

Cómo añadir una librería

Para añadir una librería como proyecto, ejecutamos el comando ng g library amazing-library:

ng g library amazing-library

La CLI genera una estructura de archivos para la librería, incluyendo su propio package.json para gestionar sus dependencias:

karma.conf.js package.json src tsconfig.lib.prod.json
ng-package.json README.md tsconfig.lib.json tsconfig.spec.json

Perfecto, ya tenemos creada la librería con sus archivos. Nuestro siguiente paso es compilar y ejecutar los proyectos.

Conoce más sobre los comandos de Angular CLI en la documentación oficial.

Compilar y ejecutar proyectos

Al igual que trabajamos habitualmente con la CLI, podemos ejecutar nuestras aplicaciones o compilarlas usando comandos de ng como ng serve o ng build acompañados del nombre de la aplicación.

Por defecto, angular.json define el primer proyecto creado como predeterminado, y lo cargará automáticamente si ejecutas ng serve sin especificar ningún nombre.

ng serve amazing_landing
ng build amazing-library

Resumen

En este artículo vimos por qué conviene usar un Angular Workspace para estructurar nuestros proyectos y cómo la CLI de Angular nos facilita gestionar, ejecutar y compilar cada uno de forma organizada. Espero que te sea de gran utilidad en tus próximos proyectos.