Angular, birden fazla projenin bulunduğu bir angular.json dosyasında :host-context([dir=rtl]) .ion-float-start -> eşleşmeyen pseudo-class :host-context uyarısı veriyor

İki farklı backend ile kullanılan bir Angular Projem var. Ön yüz aynı. İkinci projeyi angular.json dosyasına eklediğimden beri bu uyarıları alıyorum:

Warning: 10 rules skipped due to selector errors:
  :host-context([dir=rtl]) .ion-float-start -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-end -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-sm-start -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-sm-end -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-md-start -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-md-end -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-lg-start -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-lg-end -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-xl-start -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-xl-end -> unmatched pseudo-class :host-context

İkinci projedeki tek farklar bazı scss dosyaları ve environment.ts. Bu uyarıların ne anlama geldiğini ve nereden geldiğini hiç bilmiyorum. Google hiçbir çözüm sunmadı. Bunu nasıl düzelteceğini bilen var mı?

Angular, Ionic ve node güncel.

Güncelleme: Görünüşe göre bu uyarının nedeni Ionic. https://github.com/ionic-team/ionic-framework/issues/23298#issuecomment-840598080 Ve sanırım göz ardı edilebilir.

Cevap #1

Bu, Angular sürüm 11.1'de bir optimizasyon olarak tanıtılan Satır İçi kritik CSS olarak bilinen bir özellikle ilgilidir. İlk sürümünde, bu özellik varsayılan olarak devre dışıydı, ancak sürüm 12'den itibaren varsayılan olarak etkin hale geldi.

Özellik etkinleştirildiğinde, Angular derleme sırasında belirli bir süreci izler:

  1. Angular, render için gerekli tüm CSS kaynaklarını (kritik CSS olarak bilinir) tanımlar ve çıkarır.

  2. Kritik CSS çıkarıldıktan sonra, Angular bunu doğrudan index.html dosyasına gömer.

Özetle, bu optimizasyon Angular'ın kritik CSS'i doğrudan index.html dosyasına satır içi olarak yerleştirmesine olanak tanır ve uygulamanın yüklenme ve render performansını artırır.

Ve bunu devre dışı bırakmak için angular.json dosyasında inlineCritical değerini false olarak ayarlayabilirsiniz.

"build": { "options": { "optimization": { "styles": { "inlineCritical": false } } } }

İlgili makaleler