Cómo evitar que sus proveedores angulares terminen en el inyector incorrecto

En Angular, registrar proveedores de inyección de dependencias usando funciones simples es una práctica común. Sin embargo, al crear tales funciones, es importante considerar su uso previsto.

Por ejemplo, Angular proporciona varias funciones como provideHttpClient(), provideRouter()y withDomHydration()que registran proveedores bajo el capó. Estas funciones están diseñadas para usarse en un inyector de entorno , en lugar de en un inyector de componentes o directivas.

Supongamos que está creando una función como provideSvgIconsConfig()la que registra un proveedor para la configuración de iconos SVG. Si usa esta función en un componente o en un inyector de directiva, no verá ningún error. Sin embargo, esto puede provocar un comportamiento inesperado o errores en el futuro.

export function provideSvgIconsConfig(config: Partial<SVG_CONFIG>) {
  return {
    provide: SVG_ICONS_CONFIG,
    useValue: config,
  };
}

      
                

                    
                    
                
            

Para ilustrar esto, considere la implementación actualizada de provideSvgIconsConfigusing makeEnvironmentProviders:

import { makeEnvironmentProviders } from '@angular/core';

export function provideSvgIconsConfig(config: Partial<SVG_CONFIG>) {
  return makeEnvironmentProviders([
    {
      provide: SVG_ICONS_CONFIG,
      useValue: config,
    },
  ]);
}

¡ Sígueme en Medium o Twitter para leer más sobre Angular y JS!