Comment utiliser useValue dans Angular pour injecter des valeurs ?

Le provider useValue dans Angular permet d'injecter directement une valeur constante dans vos composants et services. C'est particulièrement utile pour la configuration d'application, les constantes globales ou les valeurs de test.

Comprendre useValue avec un exemple concret

Imaginons que vous développez une application qui nécessite différentes configurations selon l'environnement :

1. En production :

   • URL de l'API réelle
   • Clés d'API de production
   • Configuration de production

2. En développement :

   • URL de l'API locale
   • Clés d'API de test
   • Configuration de développement

C'est exactement ce que permet useValue : injecter des valeurs différentes selon le contexte.

Différences avec les autres providers

Provider	Description	Exemple	Cas d'utilisation	Documentation
useClass	Remplace complètement un service par une autre classe	{ provide: UserService, useClass: MockUserService }	Quand vous voulez une implémentation complètement différente (ex: mock pour les tests)	En savoir plus
useValue	Fournit une valeur fixe	{ provide: API_URL, useValue: 'https://api.example.com' }	Pour des constantes ou des objets simples prédéfinis	En savoir plus
useFactory	Crée dynamiquement une valeur via une fonction	{ provide: UserService, useFactory: () => environment.production ? new RealUserService() : new MockUserService() }	Quand la valeur dépend de conditions ou nécessite une logique de création	En savoir plus
useExisting	Crée un alias vers un service existant	{ provide: AbstractLogger, useExisting: ConsoleLogger }	Quand vous voulez utiliser un service existant sous un autre nom	En savoir plus

Mise en pratique avec notre gestionnaire d'utilisateurs

Créons une configuration pour notre service d'utilisateurs :

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { ApiConfig } from './config.interface';

const apiConfig: ApiConfig = {
  apiUrl: 'https://api.example.com/users',
  apiKey: 'your-api-key',
  maxUsers: 100
};

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: 'API_CONFIG',
      useValue: apiConfig
    }
  ]
};

user.service.ts

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from './user';
import { ApiConfig } from './config.interface';

@Injectable()
export class UserService {
  private http = inject(HttpClient);
  private config = inject<ApiConfig>('API_CONFIG');

  getUsers() {
    return this.http.get<User[]>(this.config.apiUrl);
  }
}

config.interface.ts

export interface ApiConfig {
  apiUrl: string;
  apiKey: string;
  maxUsers: number;
}

user.ts

export interface User {
    id: number;
    name: string;
    username?: string;
    email: string;
    address?: {
        street: string;
        suite: string;
        city: string;
        zipcode: string;
        geo: {
            lat: string;
            lng: string;
        }
    };
    phone?: string;
    website?: string;
    company?: {
        name: string;
        catchPhrase: string;
        bs: string;
    };
}

CONSEIL

Il est recommandé d'utiliser des interfaces pour typer les valeurs injectées. Cela permet d'avoir une meilleure autocomplétion et détection d'erreurs.

Cas d'utilisation typiques

1. Configuration d'application

   • URLs d'API
   • Clés d'API
   • Paramètres globaux

2. Constantes globales

   • Valeurs de pagination par défaut
   • Limites système
   • Messages d'erreur standards

3. Valeurs de test

   • Données de mock
   • Configuration de test
   • Paramètres de simulation

ATTENTION

Les valeurs injectées avec useValue sont immuables. Si vous avez besoin de modifier la valeur pendant l'exécution, utilisez plutôt un service.

Bonnes pratiques

1. Typage des tokens d'injection

// Définir un type pour le token
export const API_CONFIG = new InjectionToken<ApiConfig>('API_CONFIG');

// Utiliser le token typé
providers: [
  {
    provide: API_CONFIG,
    useValue: apiConfig
  }
]

En savoir plus : InjectionToken

2. Organisation des configurations

// Séparer les configurations par domaine
const userConfig = {
  maxUsers: 100,
  defaultRole: 'user'
};

const apiConfig = {
  baseUrl: 'https://api.example.com',
  timeout: 5000
};

providers: [
  { provide: 'USER_CONFIG', useValue: userConfig },
  { provide: 'API_CONFIG', useValue: apiConfig }
]

3. Utilisation avec les environnements Angular

import { environment } from '../environments/environment';

providers: [
  {
    provide: 'API_CONFIG',
    useValue: environment.apiConfig
  }
]

ASTUCE

Pour les valeurs de configuration sensibles, utilisez les variables d'environnement et injectez-les via useValue plutôt que de les coder en dur dans l'application.

En savoir plus : Environnement