Basic styles not being applied until I reload page

Ionic Framework ionic-v3
1

When I run ionic-serve, basic styling isn’t applied such as

  • Menu shows on wrong side and not styles
  • ion-buttons “start” not showing on the left:
<ion-navbar>
   <ion-buttons start>
      <button ion-button icon-only menuToggle>
         <ion-icon name="menu"></ion-icon>
      </button>
   </ion-buttons>
</ion-navbar>

I only include the code here to show I’m not doing anything weird.
When I run “ionic-serve”, the menu is on the right side, not “start”, and has no styling (it’s a different color when it is styled correctly).

If I’m viewing in Chrome, I can Ctrl+R, reload the page, and all styles are correct.

However, if I run “ionic cordova build android”, and then view the app, the styles are not there, and I can’t “refresh” my app, and wouldn’t want the users to have to.

How can I make sure my styles are there when I send a build of my application?

Here is an example:
image

  • ionic 3.20.0
  • cordova 8.0.0
  • angular/core 5.2.10
2

Hello,
if my changes does not update correctly, then I delete the content of www folder and .sourcemaps folder, so that everything is build from scratch. If I run in browser also clear cache could help.

Maybe this hepls for you too.

Best regards, anna-liebt

3

Thanks Anna. I tried this but something else was going on.

First, I had to read that “start” wasn’t what I wanted, I wanted “left” on Android. Then I determined that initially after “ionic serve” I got all “md” classes in android, but if I refresh, I get ios classes (?!?!). So tabs-ios instead of tabs-md. I don’t know why Chrome switches to ios after refresh. I actually prefer the ios classes (rounded icons instead of square, color blue menu icon as opposed to grey, etc. I guess I’ll just change my “start” to “left” and make Creative fix the styling!