Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ionic 4 - Styles being injected only after first livereload

See original GitHub issue

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:

Start the project
All broken
Make a change
All good

Related Code captura de tela de 2018-08-14 15-24-17

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

Issue Analytics

State:
Created 5 years ago
Comments:27 (7 by maintainers)

Top GitHub Comments

3reactions

matheushfcommented, Aug 30, 2018

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.

2reactions

luishmcmorenocommented, Sep 7, 2018

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