Angular Provider가 잘못된 인젝터에서 종료되지 않도록 하는 방법

May 03 2023
Angular에서는 일반 함수를 사용하여 종속성 주입 공급자를 등록하는 것이 일반적입니다. 그러나 이러한 함수를 만들 때 의도된 용도를 고려하는 것이 중요합니다.

Angular에서는 일반 함수를 사용하여 종속성 주입 공급자를 등록하는 것이 일반적입니다. 그러나 이러한 함수를 만들 때 의도된 용도를 고려하는 것이 중요합니다.

예를 들어 Angular는 provideHttpClient(), 등의 여러 기능을 제공 provideRouter()하며 withDomHydration()내부적으로 공급자를 등록합니다. 이러한 기능은 구성 요소 또는 지시문 인젝터가 아닌 환경 인젝터 에서 사용하도록 설계되었습니다 .

provideSvgIconsConfig()SVG 아이콘 구성을 위해 공급자를 등록하는 것과 같은 함수를 생성한다고 가정합니다 . 구성 요소 또는 지시문 인젝터에서 이 함수를 사용하면 오류가 표시되지 않습니다. 그러나 이로 인해 예기치 않은 동작이나 오류가 발생할 수 있습니다.

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

      
                
No Error

이를 설명하기 위해 provideSvgIconsConfigusing 의 업데이트된 구현을 고려하십시오 makeEnvironmentProviders.

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

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

Angular 및 JS에 대해 자세히 알아보려면 Medium 또는 Twitter 에서 저를 팔로우하세요 !