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.
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
- fix(lab): remove css that places the statusbar above the header fixes android and windows statusbar so it is on top of the header in lab references #3069 — committed to ionic-team/ionic-cli by brandyscarney 6 years ago
@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…