Servicios Angular: providedIn y providers

logo de angular

Estoy jugando con los Módulos en Angular. Y como siempre, me gusta hacer un ejemplo lo más sencillo posible para asentar los conceptos. Mi ejemplo: un módulo principal «tonto» que importe un módulo «Greeting» y lo use.

Como los módulos teóricamente sirven para agrupar componentes y exponer solo algunas de ellas, pues a «Greeting» le pongo un servicio GreetingService que devuelva un «Hola» y un componente GreetingComponent que lo muestre en pantalla. La idea es exportar el componente ocultando el servicio al módulo principal.

Sin problemas por el lado del componente. En el fichero greeting.module.ts basta poner en declarations y en exports el componente GreetingComponent.

@NgModule({
  declarations: [GreetingComponent],
  exports: [GreetingComponent],
  ...
})
export class GreetingModule { }

Pero con los servicios… ¡Menudo lío!. Todo esto me dio cierta guerra. Estaba empeñado en ocultar el servicio salvo que el módulo lo exportara, pero no es posible. Los servicios no tienen nada que ver con los módulos.

Cuando declaramos un servicio, podemos ponerle providedIn y decirle dónde se registra. Los valores pueden ser

  • root: Se instancia el servicio una sola vez y está disponible para cualquiera que quiera usarlo
  • Un nombre de módulo, componente, etc: Se instancia para ese módulo o componente y está disponible para él. Sin embargo, cualquiera puede usar el servicio y se crearán instancias nuevas según se vayan diciendo que se necesita, a nivel de módulo o componente.
  • Si no se pone nada, no se instancia. Se creará una instancia para cada uno que lo necesite.

Así que providedIn sirve básicamente para decir dónde está visible el servicio por defecto y si queremos o no instancias distintas cada vez que alguien lo pida. Y no tiene nada que ver con encapsulación. El servicio estará disponible para quien lo pida, sea o no del módulo, componente o lo que sea.

Y la forma de pedir un servicio es con providers. El componente o módulo que necesite ese servicio, sólo tiene que ponerlo en su array de providers. Se creará una instancia para él o no según hayamos indicado en providedIn.

Esta entrada ha sido publicada en angular y etiquetada como , . Guarda el enlace permanente.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.