In a component, services are available if declared as constructor parameters. But undefined if...

Migrating from Angular 14 to 20, I've been warned that services shouldn't be transmitted through component constructor, but injected in variable members instead.

So I've changed this, that was working:

import {Component, OnInit, Input, Inject} from '@angular/core';
import { CodeOfficielGographiqueService, Commune } from '../../../../openapi';
import { environment } from '../../../environments/environment';
import {CommuneService} from '../../core/services/commune.service';

/** Combobox en autocomplete des communes du COG */
@Component({
selector: 'app-communes',
templateUrl: './communes.component.html',
styleUrls: ['./communes.component.scss'],
standalone: false
})
export class CommunesComponent implements OnInit {
/** Année du Code Officiel Géographique. */
@Input()
anneeCOG: number;

/** Locale du tri des communes */
@Input()
locale: string = 'fr_FR';

/** Liste des communes ordonnées par locale */
communes: Commune[] = [] as Array<Commune>;

/** Codes communes avec leur commune associée. */
communesMap: Map<string, Commune> = new Map<string, Commune>();

/** Code commune sélectionné. */
codeCommune: string = null;

/** Commune sélectionnée (objet). */
communeSelectionnee: Commune = null;

/** Libellé final de la commune sélectionnée. */
libelleCommuneSelectionnee: string;

/**
* Construire une instance du composant.
*/
constructor(private readonly communeService: CommuneService, private readonly cogService: CodeOfficielGographiqueService) {
}

/**
* Réaction à l'initialisation du composant :
* Lire les communes triées par locale, et sous forme de Map indexée par codeCommune.
*/
ngOnInit(): void {
this.cogService.configuration.basePath = environment.spark_url;
[...]
}


to that:

[...]

/** Combobox en autocomplete des communes du COG */
export class CommunesComponent implements OnInit {
[...]

/** Libellé final de la commune sélectionnée. */
libelleCommuneSelectionnee: string;

/** Gestion des communes (REST) */
private readonly communeService: CommuneService = Inject(CommuneService);

/** Code Officiel Géographique (REST) */
private readonly cogService: CodeOfficielGographiqueService = Inject(CodeOfficielGographiqueService);

/**
* Construire une instance du composant.
*/
constructor() {
}

/**
* Réaction à l'initialisation du composant :
* Lire les communes triées par locale, et sous forme de Map indexée par codeCommune.
*/
ngOnInit(): void {
this.cogService.configuration.basePath = environment.spark_url;
[...]
}


(or with the @Inject(CommuneService) private readonly communeService: CommuneService; form)

But declared that way, ngInit() finds these services undefined. Why?

Continue reading...