Même référentiel, même commit, même package-lock.json : sur un ordinateur, l’application Angular fonctionne parfaitement, sur l’autre, elle plante immédiatement au démarrage avec une erreur NG0203. Au final, ce n’était ni la faute d’Angular ni celle de npm, mais d’un dossier nommé rene.poepperl.000.
Testé avec : Angular 22.0.8 · @angular/build 22.0.7 · Node 24 · Windows · Vite Dev-Server
Erreur NG0203 malgré un code source sans erreur
Depuis vendredi dernier, ce phénomène m’a rendu fou. Sur mon ordinateur de développement, l’application Angular démarrait sans problème, mais sur le serveur de développement en mode développement (Windows Server avec Bureau à distance), seule une page blanche s’affichait et la console du navigateur montrait l’erreur suivante :
ERROR RuntimeError: NG0203: The `EnvironmentInjector` token injection failed.
`inject()` function must be called from an injection context…
at injectInjectorOnly (_pending_tasks-chunk.mjs:667:11)
at ɵɵinject (_pending_tasks-chunk.mjs:684:40)
at Object.factory (_debug_node-chunk.mjs:10034:42)
at R3Injector.hydrate (_pending_tasks-chunk.mjs:1314:11)
at __spreadProps.getStandaloneInjector (_debug_node-chunk.mjs:10054:31)
at createRootViewInjector (_debug_node-chunk.mjs:8994:44)
at ComponentFactory.create (_debug_node-chunk.mjs:9065:32)
Que signifie généralement l’erreur NG0203 ?
L’erreur se produit lorsque la fonction inject() d’Angular est utilisée en dehors d’un contexte d’injection valide. Il s’agit donc (en principe) de l’injection de dépendances d’Angular.
Les contextes d’injection valides sont :
- Constructeurs de classes
- Initialisateurs de champ
- Fonctions de fabrique : à l’intérieur de la fonction factory d’un InjectionToken ou lors de la configuration de providers avec useFactory
- Guards et resolvers fonctionnels de routeur (CanActivateFn ou ResolveFn…)
Un coup d’œil à main.ts, app.config.ts et aux différentes composantes a cependant montré que tout était en ordre. Configuration standard avec provideRouter & cie. Rien de suspect.
Si le même code fonctionne sur l’ordinateur A mais pas sur l’ordinateur B, le problème vient rarement du code.
Étape 1 : L’essentiel d’abord : Réduire l’espace de recherche
Avant de lire du code pendant des heures : le serveur de développement Angular (Vite avec modules à la volée) et le build de production (esbuild avec bundles fixes) fonctionnent de manière totalement différente.
Exécute cette commande :
npx ng build --configuration development
npx http-server dist/DeinProjekt/browser
Cette commande contourne le serveur de développement Angular-Vite intégré, crée un build et le sert via un simple serveur http. Si cela fonctionne, le problème ne vient définitivement pas du code ou des dépendances, mais se situe quelque part dans le serveur de développement Vite.
Étape 2 : Analyser le graphe des modules
Le message d’erreur NG0203 indique qu’au moment où inject est appelé, il n’existe pas de contexte d’injection, contrairement à ce qui était attendu. Cela peut être causé par un problème de multi-instance. Si le serveur de développement charge Angular Core plusieurs fois au lieu d’une seule, le contexte d’injection est créé lors du premier chargement, mais lors de la deuxième instance, inject est appelé sans contexte d’injection. Et c’est là que cela plante.
La recherche de la cause de l’erreur doit donc se poursuivre dans l’onglet Réseau des outils de développement du navigateur pour obtenir une certitude.
Dans mon cas, le serveur de développement livrait effectivement les modules / chunks de modules avec deux empreintes (hashes) différentes. Cela signifie que Angular Core a été traité deux fois par le prebundler et que les deux versions ont été chargées dans l’application Angular :
| Angeforderte Datei | Typ | Größe |
|---|---|---|
main.js |
script | 104 kB |
@angular_platform-browser.js?v=abc4743f |
script | 50,2 kB |
@angular_core.js?v=abc4743f |
script | 998 kB |
@angular_router.js?v=abc4743f |
script | 261 kB |
| ... | ... | ... |
chunk-GMRBKFW6.js?v=7c52e23b |
script | 89,3 kB |
chunk-KXOBELG4.js?v=7c52e23b |
script | 905 kB |
Deux empreintes (hashes) différentes (abc4743f et 7c52e23b) signifient : Angular Core a été prébundlé et chargé deux fois (~998 KB + ~905 KB). Une instance initialise l’injecteur, l’autre trouve null — et voilà, NG0203.
Étape 3 : Trouver le coupable
Une fois qu’il était évident que deux instances distinctes d’Angular avaient été chargées, la question était : pourquoi ?
Un examen plus attentif de l’onglet Sources des outils de développement du navigateur a aidé.
Cela a montré qu’une instance provenait de C:\Users\rene.poepperl\Documents\Projekt et l’autre de C:\Users\rene.poepperl.000\Documents\Projekt. Le coupable était donc mon dossier de profil Windows.
Que s’est-il passé ici ?
Sous Windows, un dossier de profil utilisateur avec le suffixe .000 est créé si Windows ne peut pas charger le profil original à la connexion. Windows crée alors un nouveau profil en arrière-plan et relie les anciens chemins à l’aide de « junctions » (liens dans le système de fichiers, aussi appelés points de réanalyse / reparse points).
Normalement, ces junctions pointent finalement vers les mêmes fichiers. Mais : Node.js ou Vite résolvent parfois les chemins en utilisant realpath(), parfois non, ce qui crée une incohérence dans les noms de chemins. Vite pense alors travailler avec deux dossiers différents et bundle deux fois node_modules. Bravo !
La solution : un environnement de travail propre
La correction est simple, mais nécessite un déplacement cohérent :
Déplace le projet vers un véritable chemin plat sans points de reconnexion (par ex.
C:\dev\TonProjet).Important : Ne prends pas le dossier
node_modules! Sinon, tu emportes les références de chemin cassées avec toi.Réinstalle les dépendances
Vérifie ensuite dans le serveur de développement (onglet Réseau) si tous les chunks Angular portent exactement le même ?v=...-hash. Si c’est le cas, l’application fonctionne à nouveau de manière stable.
