Ionic 4 + Angular 6 PWA Styles not working / broken

Question

Hope someone can help me here,

I have an Ionic 4 app using Angular 6 pwa. I have followed the steps in this post to get it working

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

All the steps complete fine and also the package builds and runs correctly without errors.

However all my control specific styles are missing e.g

my-controll.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;
    }
}

You can see that the files are hashed correctly and I have no 404's to suggest any files are missing. Doing a normal ionic cordova build without --prod will make the styles work again.

Any help would be appreciated!

Edit -- quick update.

So the missing styles seem to be in main_xxxxxxxxx.js Example snippet below

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: {}
        });

And this file is being loaded, but are ignored for some reason

Another Update

What’s interesting is that in the non-pwa build it looks like this in main.js

/*!****************************************************************!*\
  !*** ./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"

/***/ }),

So the pwa build add these [_ngcontent-%COMP%] markers inline

Answer 1

Since Ionic 4 and Angular 6, you have to remove the page / component tag. Please see Migration to Ionic 4 -> https://beta.ionicframework.com/docs/building/migration/#overview

Page/component Sass should no longer be wrapped in the page/component tag and should use Angular's styleUrls option of the @Component decorator

So it's not a bug and everything is working as expected! So please read the migration guide and remove the wrapper and everything should work again

Answer 2

So made some progress on this, and I'll answer my own question for now.

It seems to be an issue with the element selectors in scss files

So if I have scss like this

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

the PWA build fails to include the styles for that component

if I remove the app-visit wrapper then it works on the PWA build!

I'm guessing there's a deeper issue here that I don't understand but I'll make some posts with the Ionic and Angular teams.

But if you are experiencing this, then this is a good work-around for now