Ionic 4 + Angular 6 PWA Styles broken

Ionic Native
1

Hi Guys,

I am having trouble adding pwa service worker support.

I have followed the steps in this post :


This almost works and my application runs, but all my styles are missing.

Has anyone else had this issue ?

Have now created this issue on StackOverflow

Thanks

2

Copy of my answer on stackoverflow:

I think the way to style background-color on ion-content changed between versions

Was:

ion-content {
   background-color: var(--light-gray-lightest);
}

Now:

ion-content {
    --background: var(--light-gray-lightest);
 }
3

Hi thanks for looking into this , but this is just one style as an example. ALL of my component specific styles are not coming through with the PWA build and they all work fine without a PWA build

4

Oh ok sorry I just jumped on the first stuffs I noticed :wink:

Maybe are you facing the same issue as https://forum.ionicframework.com/t/v4-pwa-production-build-mime-type-error-in-chrome ? If you inspect the network you see absolutely no styles or you see styles but served with the wrong header?

5

The styles are in-lined and seem to be in main_xxxxxxxxxx.js

And look something like this

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

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

6

how did you build your pwa before deploying it to your web server?

I do the following:

ionic build --prod

then I took what’s under www and I push it to my server

7

Yes thats how I build,

ionic build (this works with all styles showing correctly)
ionic build --prod (app works but app specific component styles are not working)

Can you confirm the format of your inline styles in main_xxxxxxxxxx.js after a --prod build

Thanks

8

aren’t the styles added as <style>...</style> element in the html pages actually?

could you provide the link to your pwa?

9

So making some progress on this!

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

So if we have our 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 we remove the app-visit wrapper then it works on the PWA build!

10

I think there is probably something not correct with the css

Let’s say you have

 visit.component.ts
 visit.component.scss

and

@Component({
  selector: 'app-visit',
  templateUrl: './visit.component.html',
  styleUrls: ['./visit.component.scss'],
})

Note: No ViewEncapsulation.None encapsulation here

So…

Ionic v3 -> use the component name in the scss, like

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

In Ionic v4, with the introduction of shadow dom => don’t use the component name:

 .visit-details {
     margin-top: 20px;
  }
11

Ah ok,

Would be good if this had just not worked! Wonder why it took an Angular PWA build to expose the problem?

12

I’m as surprised as you are, really weird

Keep me posted