Comment injecter une simple valeur + bonne pratique

Il est tout à fait possible d'injecter une simple valeur dans un service ou un composant Angular en utilisant la fonction inject() fournie par Angular. Cela peut être utile pour injecter des valeurs de configuration ou des dépendances qui ne sont pas des services.

1. Déclarer dans le provider

Dans app.config.ts, on peut déclarer une valeur à injecter :

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

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: 'BASE_URL', useValue: 'https://my-api.com' }
  ]
};

useValue permet de fournir une valeur constante à injecter.

2. Injecter dans un service ou un composant

Ensuite, on peut l'injecter dans un service ou un composant :

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

@Injectable({
    providedIn: 'root'
})
class MyService {
  private baseUrl = inject('BASE_URL')
}

La bonne pratique avec InjectionToken

Le problème de ci-dessus est que la chaîne de caractères 'BASE_URL' est sujette aux erreurs de frappe et ne bénéficie pas de la vérification du compilateur TypeScript. De plus, vous pouvez avoir des collisions de noms si vous avez plusieurs valeurs à injecter.

Pour résoudre ce problème, Angular fournit une classe InjectionToken qui permet de créer un token d'injection pour une valeur donnée. Voici comment l'utiliser :

1. Créer un InjectionToken

Créer un fichier app.tokens.ts :

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

export const BASE_URL = new InjectionToken<string>('BASE_URL');

2. Déclarer dans le provider

Dans app.config.ts, on peut déclarer une valeur à injecter :

import { ApplicationConfig } from '@angular/core';
import { BASE_URL } from './app.tokens';

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: BASE_URL, useValue: 'https://my-api.com' }
  ]
};

3. Injecter dans un service ou un composant

Ensuite, on peut l'injecter dans un service ou un composant :

import { inject, Vomponent } from '@angular/core';
import { BASE_URL } from './app.tokens';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <p>{{baseUrl}}</p>
  `
})
export class AppComponent {
   baseUrl = inject(BASE_URL)
}