Как не допустить, чтобы ваши провайдеры Angular попали в неправильный инжектор

В Angular регистрация провайдеров внедрения зависимостей с использованием простых функций является обычной практикой. Однако при создании таких функций важно учитывать их предполагаемое использование.

Например, Angular предоставляет несколько функций, таких как provideHttpClient(), provideRouter()и withDomHydration()которые регистрируют провайдеров под капотом. Эти функции предназначены для использования в инжекторе среды , а не в компоненте или инжекторе директив.

Предположим, вы создаете функцию provideSvgIconsConfig(), которая регистрирует поставщика для конфигурации значков SVG. Если вы используете эту функцию в компоненте или инжекторе директив, вы не увидите никаких ошибок. Однако это может привести к неожиданному поведению или ошибкам в дальнейшем.

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

      
                

                    
                    
                
            

Чтобы проиллюстрировать это, рассмотрим обновленную реализацию provideSvgIconsConfigиспользования makeEnvironmentProviders:

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

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

Подпишитесь на меня в Medium или Twitter , чтобы узнать больше об Angular и JS!