잘못된 컨텍스트에서 사용하는 EnvironmentProviders

컴포넌트의 providers 배열처럼 일반 프로바이더만 허용하는 컨텍스트에서 EnvironmentProviders를 사용하면 이 오류가 발생합니다. 환경 프로바이더는 애플리케이션 전체의 설정을 위해 설계되었으며, bootstrapApplication에서 설정하는 루트 인젝터나 라우팅 규칙 설정의 인젝터 같은 환경 인젝터에서만 사용할 수 있습니다.

흔히 발생하는 상황

컴포넌트 프로바이더에서 `provideHttpClient()`를 사용하는 경우

provideHttpClient() 같은 함수는 컴포넌트 수준에서 사용할 수 없는 EnvironmentProviders를 반환합니다.

@Component({
  providers: [
    provideHttpClient(), // 오류: 여기서는 EnvironmentProviders를 사용할 수 없습니다.
  ],
})
export class UserProfile {}

컴포넌트 프로바이더에서 `importProvidersFrom()`을 사용하는 경우

importProvidersFrom() 함수도 EnvironmentProviders를 반환합니다.

@Component({
  providers: [
    importProvidersFrom(SomeModule), // 오류: 컴포넌트 프로바이더로 사용할 수 없습니다.
  ],
})
export class DataView {}

오류 디버깅

환경 프로바이더를 적절한 위치로 옮기세요.

애플리케이션 전체 프로바이더

bootstrapApplication에서 환경 프로바이더를 설정하세요.

bootstrapApplication(App, {
  providers: [provideHttpClient(), importProvidersFrom(SomeModule)],
});

특정 라우팅 규칙의 프로바이더

라우팅 규칙 설정의 providers 배열을 사용하세요.

const routes: Routes = [
  {
    path: 'admin',
    component: AdminView,
    providers: [provideHttpClient(withInterceptors([authInterceptor]))],
  },
];

컴포넌트 수준 서비스

컴포넌트 범위의 서비스가 필요하면 환경 프로바이더 대신 일반 프로바이더를 사용하세요.

@Component({
  providers: [
    UserClient, // 일반 프로바이더: 정상 동작
    {provide: API_URL, useValue: '/api'}, // 값 프로바이더: 정상 동작
  ],
})
export class UserProfile {}

오류 메시지에는 문제를 일으킨 프로바이더가 표시됩니다. 컴포넌트의 providers 배열에 있는 모든 항목이 provideHttpClient(), provideRouter(), importProvidersFrom() 같은 함수가 반환한 환경 프로바이더가 아니라 일반 프로바이더인지 확인하세요.