ionic-cli: Testing Ionic 4: Ionic lab display problem

Description: Display does not look good.

Steps to Reproduce: Create new project and run with lab

Output:

C:\ae\adaept.com\aeion4>ionic serve --lab --browser chrome
> ng serve --host=0.0.0.0 --port=8100 --progress=false
> ionic-lab http://localhost:8100 --host localhost --port 8200 --app-name aeion4 --app-version 0.2.1

[OK] Development server running!

     Lab: http://localhost:8200
     Local: http://localhost:8100
     External: http://172.21.32.243:8100
     DevApp: aeion4@8100 on Merry-Christmas

[INFO] Browser window opened to http://localhost:8200!

[ng] webpack: wait until bundle finished: /?ionicplatform=android
[ng] Date: 2018-04-07T20:33:27.870Z
[ng] Hash: f5f13334cda7e469e1ff
[ng] Time: 19214ms
[ng] chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
[ng] chunk {main} main.bundle.js (main) 30.4 kB [initial] [rendered]
[ng] chunk {polyfills} polyfills.bundle.js (polyfills) 553 kB [initial] [rendered]
[ng] chunk {styles} styles.bundle.js (styles) 49.2 kB [initial] [rendered]
[ng] chunk {vendor} vendor.bundle.js (vendor) 10.6 MB [initial] [rendered]
[ng] webpack: Compiled successfully.

C:\ae\adaept.com\aeion4>run

C:\ae\adaept.com\aeion4>ionic serve --lab --browser chrome
> ng serve --host=0.0.0.0 --port=8101 --progress=false
> ionic-lab http://localhost:8101 --host localhost --port 8201 --app-name aeion4 --app-version 0.2.1

[OK] Development server running!

     Lab: http://localhost:8201
     Local: http://localhost:8101
     External: http://172.21.32.243:8101
     DevApp: aeion4@8101 on Merry-Christmas

[INFO] Browser window opened to http://localhost:8201!

[ng] webpack: wait until bundle finished: /?ionicplatform=android
[ng] webpack: wait until bundle finished: /?ionicplatform=ios&ionicstatusbarpadding=true
[ng] Date: 2018-04-07T20:34:39.403Z
[ng] Hash: f5f13334cda7e469e1ff
[ng] Time: 19315ms
[ng] chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
[ng] chunk {main} main.bundle.js (main) 30.4 kB [initial] [rendered]
[ng] chunk {polyfills} polyfills.bundle.js (polyfills) 553 kB [initial] [rendered]
[ng] chunk {styles} styles.bundle.js (styles) 49.2 kB [initial] [rendered]
[ng] chunk {vendor} vendor.bundle.js (vendor) 10.6 MB [initial] [rendered]
[ng] webpack: Compiled successfully.

capture263

My ionic info:

C:\ae\adaept.com\aeion4>ionic info
cli packages: (C:\Users\peter\AppData\Roaming\npm\node_modules)

   @ionic/cli-utils  : 2.0.0-rc.3
   ionic (Ionic CLI) : 4.0.0-rc.3

global packages:

   cordova (Cordova CLI) : 8.0.0

local packages:

   @angular-devkit/core       : 0.3.2
   @angular-devkit/schematics : 0.3.2
   @angular/cli               : 1.7.3
   @ionic/schematics-angular  : 1.0.0-rc.1
   Cordova Platforms          : none
   Ionic Framework            : @ionic/angular 0.2.1

System:

   NodeJS : v8.9.4
   npm    : 5.8.0
   OS     : Windows 10

Environment Variables:

   ANDROID_HOME : not set


C:\ae\adaept.com\aeion4>

Other Information: Relates to: #3044

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 17 (7 by maintainers)

Commits related to this issue

Most upvoted comments

@ShaneMosley I think it’s reasonable that beta software has issues. This is one of them, and it is tracked and prioritized appropriately. As a reminder, this is open source software and PRs are always welcome.

Not to be rude, but this is ridiculous… it worked perfect in 3.X. Why is it an issue to work in 4.X? When is this going to be fixed?

@dwieeb Ahh that definitely makes sense on the issue… This first thing I started to think of in the middle of reading that was creating sessions haha! Hmmm I see that all three iframes have the appropriate params in the url. I wonder why those params couldn’t be used to pull the correct session information? Sorry if that is obvious to you, I just haven’t looked into the lab setup at all. My knowledge is spotty, but if there is anything I can help with, just let me know! 😃

@ShaneMosley No worries! I can understand the frustration. 😄

The problem is a combination of things. The notch doesn’t help, certainly. But the main issue is with the switch to HTML5 routing (aka pushstate routing) in Ionic 4 via the Angular Router. The URL is rewritten, which means configuration via query parameters isn’t really possible when the URL changes, but there’s no other way for Ionic Lab to pass configuration values to the apps displayed in the iframes. We’ve tried using session storage, but then the session is shared between iframes and iOS and Android need different configuration.

@ShaneMosley we all get frustrated sometimes developing 😃 iOS status bar has been screwed up since iOS 11/the notch was released. The top apps in the app store and even apples built-in apps still have status bar issues. Have a great weekend everybody!

@dwieeb I feel bad for saying that yesterday. Ionic team is amazing, and I don’t want to take for granted what they provide…