Döngüsel Bağımlılık Tespit Edildi

Angular; bileşenler, direktifler veya pipe'lar arasında döngüsel bir bağımlılık tespit etti. Bu hata, A bileşeni B bileşenini import ettiğinde ve B bileşeni (doğrudan veya dolaylı olarak) A bileşenini import ederek bir döngü oluşturduğunda meydana gelir.

Bu döngüsel referans, Angular'ın bileşenleri düzgün şekilde başlatmasını engeller ve şöyle bir hatayla sonuçlanır:

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

Daha eski Angular sürümlerinde, bunun yerine şöyle bir hata görebilirsiniz:

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

Yaygın Nedenler

Karşılıklı Bileşen Import'ları

En yaygın neden, iki bileşenin birbirini import etmesidir:

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 {}

Dolaylı Döngüsel Referanslar

Döngüsel bağımlılıklar ara dosyalar aracılığıyla da oluşabilir:

ComponentA -> ComponentB -> ComponentC -> ComponentA

Hatayı çözme

Paylaşılan mantığı yeniden düzenleyin

Paylaşılan işlevselliği her iki bileşeni de import etmeyen ayrı bir dosyaya taşıyın:

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

@Service()
export class SharedService {
  // Paylaşılan mantık burada
}

Yalnızca tür import'ları kullanın

Türlere yalnızca TypeScript için ihtiyacınız varsa, import type kullanın:

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

Yalnızca tür import'ları derleme zamanında silinir ve çalışma zamanı döngüsel bağımlılıklarına katkıda bulunmaz.

Bileşen hiyerarşisini yeniden yapılandırın

Döngüsel bağımlılığın bir tasarım sorununa işaret edip etmediğini değerlendirin. Genellikle, paylaşılan işlevselliği üçüncü bir bileşene veya servise çıkarmak en temiz çözümdür.

Karmaşık döngüsel bağımlılıkları ayıklama

Birçok modüle sahip karmaşık uygulamalarda, döngüsel bağımlılıkları manuel olarak tespit etmek zor olabilir. Döngüsel import'ları görselleştirmek ve tespit etmek için madge gibi araçları kullanmayı düşünün:

# madge'i yükleyin
npm install -g madge

# Döngüsel bağımlılıkları kontrol edin
madge --circular --extensions ts ./src

# Görsel bir grafik oluşturun
madge --circular --extensions ts --image graph.svg ./src

Bu araçlar, projeniz genelindeki döngüsel bağımlılık zincirlerini belirlemenize ve görsel bağımlılık grafikleri oluşturmanıza yardımcı olabilir.