> ## Content Index
> Fetch the complete content index at: https://www.angularspace.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Prevent Angular Provider Misuse
- URL: https://www.angularspace.com/prevent-angular-provider-misuse/
- Published: 2024-04-30T15:07:37.000Z
- Updated: 2024-05-16T02:22:37.000Z
- Author: Dominik Pieper
- Tags: Articles

Since many Angular applications are standalone these days, we are all used to using different provider functions. The most common ones nearly everyone has seen are **provideHttpClient()** and **provideRouter()**. These functions register providers under the hood so that you can use the provided functionalities. If you look at the naming, you could think these are to use in your Components **providers: \[\]** array, but in fact, they were created to be used in [environment injectors](https://angular.io/api/core/ENVIRONMENT%5FINITIALIZER?ref=angularspace.com).

###   
What's the problem?

  
If you start to write your own logger library, you come to a point where you add a **provideLogger()** function that registers a provider for the configuration.  

```js
export function provideLogger(config: Partial<LoggerConfig>) {
  return {
    provide: LoggerConfig,
    useValue: config,
  };
}
```

  
You can use the function in a component or a directive injector without an error. In the long run, this can lead to errors or unexpected behavior in your library. If you design your **provideLogger** function to configure the logging behavior globally, using it in components with different parameters can cause the logger to behave inconsistently, even though this is not meant to be possible.  

![](https://storage.ghost.io/c/3f/63/3f6333b8-1f83-4017-8426-91bfbc264d81/content/images/2024/04/plain-providers-array.png)

The provideLogger function used within the AppComponent

### The solution

  
Angular provides the **makeEnvironmentProviders** function, which returns an **EnvironmentProviders** type instead of a **provider** array. This type wraps the providers to ensure your function is only used in the right place, your **bootstrapApplication** / **ApplicationConfig**.  
You need the **provideLogger** implementation to use **makeEnvironmentProviders**:  

```js
import { makeEnvironmentProviders } from "@angular/core";

export function provideLogger(config: Partial<LoggerConfig>) {
  return makeEnvironmentProviders([
    {
      provide: LoggerConfig,
      useValue: config,
    },
  ]);
}
```

  
Now, if you try to use **provideLogger()** in a component (or directive), you'll see an error. This error tells you faster that the providers are designed to be used with environment providers and can't be used here.

![](https://storage.ghost.io/c/3f/63/3f6333b8-1f83-4017-8426-91bfbc264d81/content/images/2024/04/with-make-environment-providers.png)

provideLogger with makeEnvironmentProviders

[![](https://storage.ghost.io/c/3f/63/3f6333b8-1f83-4017-8426-91bfbc264d81/content/images/2024/04/Screenshot-2024-04-23-at-18.33.54-2.png)](https://twitter.com/GeromeDEV?ref=angularspace.com)

---

[![](https://storage.ghost.io/c/3f/63/3f6333b8-1f83-4017-8426-91bfbc264d81/content/images/2024/04/yx3RkJdA.jpg)](https://www.angular-university.io/?ref=angularspace.com)