We ran ionic build --prod for an Ionic Angular project to generate the www folder on a Debian 10 server. Set up the domain and everything works properly.
The problem is that when opening the app in Chrome and sometimes in Safari as well on desktop, the icons, buttons and some other elements don’t show up the same as on localhost when testing with ionic serve. Specifically, a new class is added to some elements “sc-ion” that causes problems in the UI (e.g. the icons don’t have the right line-height, the buttons’ text has a different color, etc.). Please see below some screenshots.
Do you know how we can remove the sc-ion class and keep the styling consistent with what gets displayed with ionic serve on localhost? I look forward to hearing your feedback.
Thanks for your help,
Andy
Hotjar was causing the issues.
Related
To be more precise, I already have a huge app writen in Ionic and now we're considering to migrate it to flutter, but we can't rewrite it from scratch, both ionic and flutter should coexist.
So my question is: can I have a flutter app as a "host" and import / run the ionic app inside it? Something like a micro frontend.
Until now I was able to build the target ionic app and import it on the flutter app, under android folder, but it does not feels like a productive way to approach the problem.
I also googled a little bit about this integration, but did not find anything that solves this problem.
I appreciate any help on this topic.
Yes, it is possible, but very cumbersome.
I did it for a project and embedded 3 ionic apps inside flutter.
I'll not list every problem that i faced but just go through some points to give you an idea.
You will need to take care of some cordova plugins that use native code, for Android copy and paste some folders like CordovaLib,cordova and use it as a library. For iOS you must add the plugin files like *.h to the compiles list inside Xcode and create an Pod to get the cordova resources (that's the way i did)
To "launch" the app for android you need to start the cordova activity and for iOS you need to play with UINavigationController and FlutterViewController, and of course create a method channel to be possible to call it from Flutter.
For multiple apps, you have to mess inside de cordova code to get the app from the right www folder and be sure to equalize every plugin version between apps.
Some packages from flutter may clash with ionic/cordova libs
Every change you do to your ionic application it must be tested outside flutter and within it to see if there's any mismatch behavior that you didn't expect, specially when adding new plugins.
Maybe some permission issues will arrive between applications like camera or localization.
I know thats not the answer, but when searching on how to do it, i stumbled upon this question a few months ago and it still without any answer on this problem.
But my final take is that the effort of joining together all pieces using multiple languages and frameworks together with the job of maintaining this spaghetti behemoth is not worth it and you'll save yourself of a tremendous headache.
I've successfully added a proxy to my ionic.config.json files which works when I do 'Ionic Serve' as well as with the Ionic Dev App. However, I'm having trouble loading it in Ionic View.
I saw recently (last week 12/4/17) they added HTTP plugin support with a CORS workaround for the Ionic View mobile app. However I can't seem to load any of my HTTP data from the proxy. Is Ionic View compatible with proxies? I know this issue if fairly new so there isn't much resources out there for it. Any help or lead in the right direction would be appreciated!
Support just got back to me - they have officially added plugins. Support docs are here in case anyone runs into the same issue...
https://ionicframework.com/docs/native/http/
https://github.com/silkimen/cordova-plugin-advanced-http
I am using Ionic v2(currectly is 2.0.0-beta.25).
After created a Ionic v2 project, and run the
ionic serve
command, Ionic will apply the iOS theme in the browser by default. Since Ionic announced it supported the windows platform, i am planning to use ionic v2 to create an application, so i wish i can preview as windows/wp theme in my browser. The document said that add ?ionicplatform=android to the URL can change how Ionic sees which platform i am on, it works and changed the theme as android. Then i tried ?ionicplatform=wp and also ?ionicplatform=windows . it doesn't work.
I also followed this document to add class="wp" , it still doesn't work. i also found Ionic Lab, this application even don't have a windows phone option.
The offical document have a live perview on the right side of the v2 components document page. so i think maybe there is some way to make the perview in browser to apply the windows/wp theme. I've google it but can't find any answer.
I also tryed edit my UserAgent as Lumia phone but it still doesn't works.
So, if i want the ionic serve browser perview apply windows/wp theme, what should i do?
Thanks
You can do this using chrome. When project are running make inspect and select ctrl+shift+m for change to device mode and choice your phone. If windows phone are not in that list, click edit in dropdown and there you have at least one Windows Phone. :)
I have an Ionic app which I currently serve as a web app by doing ionic serve
I have few questions about it:
By default in the served web app, it takes the iOS layout, can it be changed to the android layout instead? How?
In the android version of y ionic app when I do ionic serve --lab, some of the bottom part of the content is somehow cut off (I can not scroll till the end), however it looks perfect in iOS version. Why does this happen and how can I fix it?
When I try to make an APK out of it as mentioned in the following link http://ionicframework.com/docs/guide/publishing.html , I get a blank app on my android device. What could be the reason?
ionic serve --platform android
Are you taking in account that iOS scroll "stretches"? I mean, even when the scroll is all way down, you still can pull the content up. Maybe your content is indeed hidden (specially if you are using a footer bar. Actually, if you are using a footer bar, try to add a margin-bottom for your content equal your footer bar height.).
Have you checked if this happens when you run ionic run android? If this command works, try to run cordova prepare android before following the publishing procedure. If the command does not work, open chrome://inspect on your computer's chrome browser (with the device connected to your computer and running your app) and debug it to check if your code is being packed with the apk and/or the app is yielding some error messages.
I am very new to Intel XDK.
To build my initial concepts, I made a very simple html 5 hello world page and it is working fine when running under EMULATE tab.
I build the app for Android, email to my address, download on mobile and installed it as well.
But after installation, when I start the application, it shows the first page with title "Html5 App Development" and then a blank White screen, that's it, I am not able to view my index.html page on the mobile.
What am I doing wrong here?
I hope that by now you have solved the problem but in case other people run into this thread. We had the same issue at times with our app until we tracked down the problem to the way the init and document ready gets fired.
Tweaking with the document ready features did the trick for us.
It sounds like you probably have it drawn at some point offscreen, due to the pixels rendered in the display vs actual pixels.
Try setting the viewport/screen size to handle this: https://gamedev.stackexchange.com/questions/70700/viewport-pixels-trouble-intel-xdk