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

[peterennis]

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.

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

[imhoffd]

@peterennis Very strange, I'm not seeing this:

I think it may be because I had the wrong dist-tag for Ionic Lab. Please try updating: npm i @ionic/lab@rc

[peterennis]

Looks better but spacing of page header iOS seems off.

[CheetahDev]

Hi,

Did you try to zoom out Chrome? (CTRL + 0)
According to your screenshot, you are zoomed in.

Regards

[imhoffd]

@CheetahDev Actually the header spacing is an issue on our end. I am working with @manucorporat to get Ionic 4 to respect configuration via query parameters. Will update when fixed in a release. Sorry, forgot to update this issue.

[imhoffd]

We still need a way to persist storage, but with a session key. This won't be solved in the next CLI release, so I re-opened the issue.

[indhio]

+1

[ShaneMosley]

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?

[nickstucko]

+1

[imhoffd]

@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.

[ShaneMosley]

@dwieeb That makes sense. I keep forgetting it's still in beta. I appreciate it and sorry for that comment

[ShaneMosley]

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

[nickstucko]

@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!

[imhoffd]

@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]

@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! :)

[imhoffd]

Thanks! It's a good idea, maintaining a "session ID" and passing it in as another query parameter configuration value. That's the next step! I'll admit this hasn't had our full attention because there are larger issues to tackle in Ionic itself. 😆

[imhoffd]

The issue with "session ID" via query parameter is that it is lost as soon as the Angular Router changes the URL.

[ShaneMosley]

That is interesting... When I get some free time, I will try to look into it as well!