Dépendance circulaire détectée

Angular a détecté une dépendance circulaire entre des composants, des directives ou des pipes. Cette erreur se produit lorsque le composant A importe le composant B, et que le composant B importe (directement ou indirectement) le composant A, ce qui crée un cycle.

Cette référence circulaire empêche Angular d'initialiser correctement les composants, ce qui produit une erreur comme :

NG0919: Cannot read @Component metadata. This can indicate a runtime circular dependency in your app that needs to be resolved.

Dans les anciennes versions d'Angular, vous pouvez plutôt voir une erreur comme :

Cannot read properties of undefined (reading 'ɵcmp')

Causes fréquentes

Imports mutuels entre composants

La cause la plus fréquente est que deux composants s'importent mutuellement :

import {Component} from '@angular/core';
import {Child} from './child';

@Component({
  selector: 'app-parent',
  imports: [Child],
  template: '<app-child/>',
})
export class Parent {}

import {Component} from '@angular/core';
import {Parent} from './parent';

@Component({
  selector: 'app-child',
  imports: [Parent],
  template: '<app-parent/>',
})
export class Child {}

Références circulaires indirectes

Les dépendances circulaires peuvent aussi passer par des fichiers intermédiaires :

ComponentA -> ComponentB -> ComponentC -> ComponentA

Résoudre l'erreur

Refactorer la logique partagée

Déplacez la fonctionnalité partagée dans un fichier séparé qui n'importe aucun des deux composants :

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

@Service()
export class SharedService {
  // Shared logic here
}

Utiliser des imports de type uniquement

Si vous n'avez besoin que de types pour TypeScript, utilisez import type :

import type {Parent} from './parent';

Les imports de type uniquement sont effacés à la compilation et ne contribuent pas aux dépendances circulaires à l'exécution.

Restructurer la hiérarchie des composants

Demandez-vous si la dépendance circulaire révèle un problème de conception. Souvent, la solution la plus propre consiste à extraire la fonctionnalité partagée dans un troisième composant ou un service.

Déboguer des dépendances circulaires complexes

Dans les applications complexes comportant de nombreux modules, les dépendances circulaires peuvent être difficiles à identifier manuellement. Envisagez d'utiliser des outils comme madge pour visualiser et détecter les imports circulaires :

# Install madge
npm install -g madge

# Check for circular dependencies
madge --circular --extensions ts ./src

# Generate a visual graph
madge --circular --extensions ts --image graph.svg ./src

Ces outils peuvent vous aider à identifier les chaînes de dépendances circulaires dans l'ensemble de votre projet et à générer des graphes de dépendances visuels.