typescript - Ionic 4 + Angular 6 PWA Stilleri çalışmıyor/bozuk

Umarım biri burada bana yardım edebilir.

Angular 6 pwa kullanan bir Ionic 4 uygulamam var. Çalıştırmak için bu gönderideki adımları takip ettim

https://www.joshmorony.com/create-a-pwa-with-angular-service-workers-in-ionic-4/

Tüm adımlar sorunsuz tamamlanıyor ve ayrıca paket doğru bir şekilde derlenip çalışıyor, hatasız.

Ancak tüm kontrole özgü stilimler eksik örn

benim-kontrol.component.scss

  app-my-contol {

      ion-content {
        background-color: var(--light-gray-lightest);
      }
      .my-class {
        padding:0;
        list-style: none;
        position: absolute;
        width: 100%;
        left: 0;
    }
}

Dosyaların doğru şekilde karmalandığını görebilirsiniz ve herhangi bir dosyanın eksik olduğunu önerecek bir 404 yok. --prod olmadan normal bir ionic cordova build yapmak, stillerin tekrar çalışmasını sağlayacaktır.

Her türlü yardım takdir edilir!

Düzenle -- hızlı güncelleme.

Görünüşe göre eksik stiller main_xxxxxxxxx.js dosyasında bulunuyor. Aşağıda örnek bir snippet var

var z = r.La({
            encapsulation: 0,
            styles: [["app-family-visit[_ngcontent-%COMP%]   .visit-details-family-view[_ngcontent-%COMP%]{margin-top:20px}@media (max-width:480px){app-family-visit[_ngcontent-%COMP%]   .visit-details-family-view[_ngcontent-%COMP%]{margin-top:10px}}app-family-visit[_ngcontent-%COMP%]   .visit-details-family-view[_ngcontent-%COMP%]   #title[_ngcontent-%COMP%]{margin-bottom:20px}app-family-visit[_ngcontent-%COMP%]   .datetime-md[_ngcontent-%COMP%]{padding-left:0}.verification_page[_ngcontent-%COMP%]{padding-top:15px}"]],
            data: {}
        });

Ve bu dosya yükleniyor, ama bir nedenle göz ardı ediliyor

Başka Bir Güncelleme

İlginç olan, non-PWA sürümünde main.js içinde bunun böyle görünmesi.

/*!****************************************************************!*\
  !*** ./src/app/case/pages/family-visit/family-visit.page.scss ***!
  \****************************************************************/
/*! no static exports found */
/***/ (function(module, exports) {

module.exports = "app-family-visit .visit-details-family-view {\n  margin-top: 20px; }\n  @media (max-width: 480px) {\n    app-family-visit .visit-details-family-view {\n      margin-top: 10px; } }\n  app-family-visit .visit-details-family-view #title {\n    margin-bottom: 20px; }\n  app-family-visit .datetime-md {\n  padding-left: 0; }\n  .verification_page {\n  padding-top: 15px; }\n"

/***/ }),

Yani pwa derlemesi bu [_ngcontent-%COMP%] işaretleyicilerini satır içi olarak ekler

Cevap #1

Ionic 4 ve Angular 6'dan itibaren, sayfa/bileşen etiketini kaldırmanız gerekiyor. Lütfen Ionic 4'e Geçiş bölümüne bakın -> https://beta.ionicframework.com/docs/building/migration/#overview

Sayfa/bileşen Sass artık sayfa/bileşen etiketi ile sarılmamalı ve @Component dekoratörünün styleUrls seçeneğini kullanmalıdır

Yani bu bir hata değil ve her şey beklendiği gibi çalışıyor! Lütfen geçiş rehberini okuyun ve sarmalayıcıyı kaldırın, her şey tekrar çalışacaktır.

Cevap #2

Bu konuda biraz ilerleme kaydettim ve şimdilik kendi sorumu kendim cevaplayacağım.

scss dosyalarındaki öğe seçicilerle ilgili bir sorun gibi görünüyor

Yani eğer benim böyle bir scss'im varsa

app-visit {
  .visit-details {
    margin-top: 20px;

    @include mobile-only {
      margin-top: 10px;
    }
  }
  .email-share {
    margin-top: 15px;
  }
  .hidden-email {
    display: none;
    &.active {
      display: block;
    }
    .side-content
    {
      border-left: 1px solid gray;
    }
  }
}

PWA derlemesi, o bileşenin stillerini dahil edemiyor

Eğer app-visit sarmalayıcısını kaldırırsam, PWA yapısında çalışıyor!

Burada anlamadığım daha derin bir sorun olduğunu tahmin ediyorum ama Ionic ve Angular ekipleriyle bazı gönderiler yapacağım.

Ama bunu yaşıyorsanız, bu şimdilik iyi bir geçici çözüm.

İlgili makaleler