Uygulama kararsız kalıyor

Bu uyarı yalnızca tarayıcıda, istemcide hidrasyon etkinleştirildiğinde ve uygulama uzun bir süre boyunca (10 saniyeden fazla) kararsız kaldığında hidrasyon işlemi sırasında görünür.

Bu genellikle sayfada bekleyen mikro görevler veya makro görevler olduğunda gerçekleşir.

Angular Hidrasyonu, bir uygulama içinde kararlı hale geldiğinde ApplicationRef.isStable'dan gelen bir sinyale dayanır:

• sunucu tarafı oluşturma (SSR) sırasında serileştirme sürecini başlatmak için
• tarayıcıda bu sinyal, sahiplenilmemiş DOM düğümlerini kaldırmak için hidrasyon sonrası temizliği başlatmak için kullanılır

Bu uyarı, ApplicationRef.isStable 10 saniye içinde true değerini yaymadığında görüntülenir. Bu davranış kasıtlıysa ve uygulamanız daha sonra kararlı hale geliyorsa, bu uyarıyı görmezden gelmeyi seçebilirsiniz.

zone.js kullanan uygulamalar

zone.js kullanan uygulamalarda kararlılık gecikmelerine katkıda bulunan çeşitli faktörler olabilir. Bunlar arasında bekleyen HTTP istekleri, zamanlayıcılar (setInterval, setTimeout) veya sürekli olarak requestAnimationFrame çağıran bazı mantıklar yer alabilir.

Makro görevler

Makro görevler setInterval, setTimeout, requestAnimationFrame vb. gibi fonksiyonları içerir. Bu fonksiyonlardan biri uygulamanın başlatma aşamasında veya başlatılan bileşenlerde çağrılırsa, uygulamanın kararlı hale geldiği anı geciktirebilir.

@Component({
  selector: 'app',
  template: ``,
})
class Simple {
  constructor() {
    setInterval(() => { ... }, 1000)

    // veya

    setTimeout(() => { ... }, 10_000)
  }
}

Bu fonksiyonların başlatma aşamasında çağrılması gerekiyorsa, bunları Angular zone'u dışında çağırmak sorunu çözer:

class Simple {
  constructor() {
    const ngZone = inject(NgZone);

    ngZone.runOutsideAngular(() => {
      setInterval(() => {}, 1000);
    });
  }
}

Üçüncü taraf kütüphaneler

Bazı üçüncü taraf kütüphaneleri de uygulama kararlılığını geciktirebilecek uzun süreli asenkron görevler üretebilir. Öneri, yukarıda açıklandığı gibi ilgili kütüphane kodunu zone dışında çağırmaktır.

Uygulama kararlı hale geldikten sonra kod çalıştırma

Uygulama kararlı hale geldikten sonra asenkron görevler kuran bir kod çalıştırabilirsiniz:

class Simple {
  constructor() {
    const applicationRef = inject(ApplicationRef);

    applicationRef.isStable.pipe( first((isStable) => isStable) ).subscribe(() => {
      // `runOutsideAngular` kullanmamıza gerek olmadığına dikkat edin çünkü `isStable`
      // doğru (truthy) olduğunda Angular zone'u dışında olaylar yayar (yanlış (falsy) değerler
      // Angular zone'u içinde yayılır).
      setTimeout(() => { ... });
    });
  }
}

Zone'suz uygulamalar

Zone'suz senaryolarda, kararlılık bir effect içindeki uygulama kodunun sonsuz bir döngüde çalışması (muhtemelen effect fonksiyonlarında kullanılan sinyaller sürekli değiştiği için) veya bekleyen bir HTTP isteği nedeniyle gecikebilir.

Geliştiriciler ayrıca PendingTasks servisini kullanarak uygulamanın kararlılığını göstermeye açıkça katkıda bulunabilir. Uygulamanızda bahsedilen API'leri kullanıyorsanız, görevi tamamlandı olarak işaretlemek için bir fonksiyon çağırdığınızdan emin olun.