Ionic 4 - Styles being injected only after first livereload

[matheushf]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.0.3 (/home/linuxbrew/.linuxbrew/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.0
   @angular-devkit/core       : 0.7.2
   @angular-devkit/schematics : 0.7.2
   @angular/cli               : 6.1.2
   @ionic/ng-toolkit          : 1.0.2
   @ionic/schematics-angular  : 1.0.2

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none

System:

   Android SDK Tools : 26.0.2
   NodeJS            : v10.5.0 (/home/linuxbrew/.linuxbrew/lib/node_modules/node/bin/node)
   npm               : 6.1.0
   OS                : Linux 3.16

Environment:

   ANDROID_HOME : /home/matheushf/Android/Sdk

Describe the Bug
When I first start my project with ionic serve --lab, it all starts normally, except that some styles are not injected, and the appearance is all broken, elements like ion-cards, ion-toolbar etc. But when you make any change to any file, the livereload brings the styles, and everything is back to normal.

The problem is making a build, you don't have livereload there.

Steps to Reproduce
Steps to reproduce the behavior:

1. Start the project
2. All broken
3. Make a change
4. All good

Related Code

Expected Behavior
All styles should appear on the first ionic serve, and ionic build

Additional Context
I noticed that [data-ion-card-md-host] doesn't gets styled on the first ionic serve, and that styles like <style data-style-tag="ion-card" data-style-mode="ion-card" data-style-scoped="true"> are only injected after the first livereload

[lander854]

Same as his

ionic info

√ Gathering environment info - done!

Ionic:

ionic (Ionic CLI) : 4.0.6 (C:\Users\Lande\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.1
@angular-devkit/core : 0.7.3
@angular-devkit/schematics : 0.7.3
@angular/cli : 6.1.3
@ionic/ng-toolkit : 1.0.6
@ionic/schematics-angular : 1.0.4

Cordova:

cordova (Cordova CLI) : 8.0.0
Cordova Platforms : not available

System:

NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
npm : 6.3.0
OS : Windows 10

Environment:

ANDROID_HOME : not set

[matheushf]

I also noticed that it only happens after I use navigation to another module/component, that is being loaded through lazy loading. Although it looks like problems with our own styles, it's ionic core styles that are not loaded properly.

So, I still don't know what to do.

[matheushf]

It still wasn't solved.

I've tried putting this page from the screenshot in the first page that loads (app.component.html) and it loads perfect with all styles, but it doesn't load the styles when using it after two routing states (1 with href from ion-tabs and another from this.router.navigateByUrl.

[luishmcmoreno]

I'm facing the same problem. @matheushf Did you fixed?

[brandyscarney]

Are you still seeing this in latest (4.0.0-beta.13)?

[luishmcmoreno]

Sorry, In my case, my problem was that I didn't put the ion-item content inside of an ion-label:

<ion-item>
    <ion-icon slot="start" icon="home"> </ion-icon>
    ION ITEM CONTENT
</ion-item>

The code above works very well when you enter at the page by url. But when you go navigating by the navPush, something wrong happens in the lazy loading and the styles is not injected. But, just the md styles. When you force iOS styles, the code above works ok.

But after some tests, I realized that the code below works very well in all cases:

<ion-item>
    <ion-icon slot="start" icon="home"> </ion-icon>
    <ion-label> ION ITEM CONTENT</ion-label>
</ion-item>

I don't know if its a bug or if it is really necessary to have the ion-label inside the ion-item. And it's happening on the beta.13 . But, everything is working fine with the ion-label. I also don't know if the bug reported by @matheushf is the same as mine.

By the way, congratulations for all ionic collaborators. I love this framework since the version 1 and the version 4 is really really awesome. I'm falling in love with Ionic Web Components and Stencil.

[brandyscarney]

@luishmcmoreno Thank you for the quick reply! At this time it is required that the content in an ion-item is wrapped in an ion-label, but we will have to look into why that would be causing styles to only load on the livereload, as that seems wrong.

Thank you for the feedback! It's really nice to hear that you're loving it. 😄

[matheushf]

Unfortunately mine is still happening, I've made an workaround re-styling (on scss) button inside ionic-toolbar so it could keep the normal style when building. But the card and some others still needs to livereload when developing.