Como y por qué decidí cambiar la arquitectura de mi proyecto Angular.

Escribo este post porque me he propuesto hablar con cierta asiduidad de problemas que me encuentro durante mis desarrollos personales, por si alguien se encuentra en la misma situación que yo y puede ayudarles.

En un proyecto de prueba en el que estaba trabajando en Angular 6, decidí implementar una arquitectura basada en componentes totalmente independientes con un módulo cada uno.

Una arquitectura similar a la siguiente:

¿En que consiste esta arquitectura? La idea basal es tener componentes totalmente independientes que gestionan su propio enrutamiento y tienen su propio archivo “module”. Con esto conseguimos componentes que pueden ser eliminados o reutilizados fácilmente entre proyectos.

Para ello, tras generar un nuevo componente en Angular y generar los archivos .html, .css y .ts, a continuación creé el archivo resolver.ts que nos facilita el acceso a un componente a través de una ruta en la cual se le pase un parámetro. Una vez entramos en el componente en el método onInit ya dispondremos de la información que nos proporcione el servicio sin falta de realizar ninguna llamada.

El código de este archivo resolver.ts es muy simple:

Y desde el component.ts se accede a la información de la siguiente forma:

El siguiente paso que seguí fue crear el archivo route.ts que gestionará el enrutamiento dentro de los diferentes elementos del componente:

El último paso en la creación de estos componentes independientes es la creación de su archivo module.ts:

Al tener cada componente su propio enrutamiento, el app.route.module.ts se nos reduce y sólo consiste en las llamadas a los módulos de cada componente creando la url base de cada uno de ellos:

Ahora bien, independientemente de las ventajas que ofrece esta arquitectura y que puedes encontrar en varios foros, yo me encontré de lleno con un problema: la inyección de dependencias.

Según mi aplicación fue ganando en lógica, acabé teniendo un archivo shared.module.ts en el cual simplemente declaraba todos los servicios comunes en mi aplicación.

Posteriormente importaba ese modulo compartido en mis component.module.ts. Los servicios los creaba de la siguiente forma:

Y los instanciaba en el constructor de mis component.ts de la siguiente forma:

El problema que yo me encontré es que cuando pasaba de un componente a otro en mi aplicación, el commons.service.ts se inicializaba en cada componente, de forma que me era imposible compartir información entre ellos.

Durante un par de días busqué información interesante sobre como solventar la inyección de dependencias en Angular, y aunque me dí cuenta que no estaba declarando correctamente la inyección:

@Injectable ({ providedIn: “root",})

Una vez solventado este punto, encontré también muchos problemas de comunicación entre componentes, sobre todo a la hora de usar componentes comunes como el loading. Llegada a este punto me planteé una solución drástica: un cambio de arquitectura, que me facilitase posteriores desarrollos y la arquitectura que ahora tengo es la siguiente:

Los componentes ahora se componen solo de un component.html, un component.ts y un component.css. El único component.module.ts que utilizo es el del app.module.ts, que tiene esta forma:

Y el app.routing.module.ts queda de la siguiente manera:

Con todo ello, he ganado en facilidad a la hora de desarrollar y aunque acometer un cambio de estas características conlleva tiempo y depurar muy bien para asegurarse que no se ha quedado nada por el camino, ahora me siento más segura y satisfecha con la nueva arquitectura, más simple desde mi punto de vista.

Espero que este documento te haya sido útil. Si es así, por favor, dale un voto positivo y compártelo en tus redes sociales. Si lo deseas, puedes encontrarme en Twitter y en Linkedin

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store