En este artículo utilizaremos la estrategia de desarrollo del monorepo para mantener en un único repositorio todo el software (proyectos) de manera que se pueda realizar un mejor mantenimiento del código. AngularFrontenders tiene en la actualidad varios repositorios ubicados en GitHub que corresponde a cada ejemplo usado en cad artículo. Trataríamos de llevar todos esos ejemplos a un único repositorio llamado «monorepo».

La gestión de tener varios repositorios es a la vez complicada y tediosa. Si aparecen nuevas versiones de librerías de terceros (por nuevas funcionalidades, bugfixes, …), e incluso hacer alguna migración, tendríamos que ir por cada repositorio y modificarlo. A más repositorios, más tiempo necesitaremos para gestionarlo.

Hoy pues, hablaremos del uso de monorepos para tener todo el código centralizado en un único repositorio y utilizaremos para que nos ayude Nx. Podemos encontrar más información al respecto, pero en este artículo sólo explicaremos cierta información para llevar a cabo dicha tarea.

Objetivo

Crear un monorepo Nx con dos proyectos iniciales (Identificadores dinámicos en componentes y Multi-idioma de los recursos (Parte 1)) llevándolos hasta Angular 14. Con el tiempo se irán incluyendo los demás proyectos proponiendo también refactorizaciones e incluso los nuevos ejemplos se podrán crear directamente en el monorepo. Mantendremos los antiguos repositorios por cuestiones históricas pero ya se marcarán como sólo lectura.

Antes de empezar

Empezamos la búsqueda de información necesaria para tener los conocimientos iniciales de git, node y angular. Hay que documentarse y empaparse del conocimiento de Nx si se desconoce esta tecnología. Con todo esto, verificamos las matrices de compatibilidad:

Así que extrayendo información, para Angular 14, crearemos un monorepo con versión de Nx 15.1.1 Pero sobretodo, seguiremos la guía par llevar los proyectos creados en angular cli a nx siguiendo la guía  https://nx.dev/recipes/adopting-nx/migration-angular

Viendo que cada proyecto que tenemos corresponde a una aplicación «app» dado que no son librerías (y de momento no tenemos pensada ninguna).

A lo largo de los diferentes artículos publicados, cada ejemplo tenía su propio repositorio en github. Lo que realizaremos ahora será crear un monorepo para tener en un mismo repositorio todos los ejemplos realizados hasta la fecha. De esta forma el mantenimiento será más fácil de manejar dado que está todo centralizado, como para hacer actualizaciones de librerías de terceros (angular, bootstrap, …).

Siguiendo los pasos

Paso 1: Situación inicial

Creamos una carpeta llamada «monorepo» donde se ubicarán los dos proyectos y ahí realizaremos primero la migración de ambos a la versión 14 de angular.

Paso 2: Migración de las aplicaciones

Para migrar cada aplicación seguiremos los pasos que nos indica la propia web de angular para dicho trabajo en https://update.angular.io. La actualización se realizará versión a versión bajo la opción «basic» dado que son proyectos muy pequeños y sin apenas complejidad, es decir, solo cambiando la versión mayor y comprobando en cada migración si todo funciona correctamente tanto para el build, serve, lint y test. En el caso de ambos proyectos son migrarlos de Angular 7 a 14.

Paso 3: convertir proyectos en un «Nx shape»

Cada proyecto se convierte en un esquema de Nx para que se pueda adaptar al estilo de monorepo con el comando «npx ng add @nrwl/angular@15.1.1». Aunque no todo es automático, se hacen diversas modificaciones de forma manual.

Conclusiones

Finalmente tenemos el monorepo.

Beneficios:

  1. Gestión y mantenimiento en un único repositorio.
  2. Todo el código está en un solo punto.
  3. Beneficios de Nx:
    1. Actualizaciones
    2. Cacheado
    3. Diagrama de dependencias

Problemas:

  1. Migración de cada repositorio (solo al principio)

Consideraciones finales:

No todo ha sido coser y cantar, han habido a lo largo del camino diversas problemáticas que se han tenido que solventar como versiones de Nodejs, problemas de testing, …. Además se han eliminado los tests e2e, migración de tslint a eslint, etc.