I have created my first Ionic app using CLI, so I did:
ionic start my-project --v2 blank
I run ionic serve command inside the project's folder, and I can see the brand new project in the browser. I did some changes in the project and run ionic serve again, perfectly fine.
I created another project with CLI:
ionic start second-project --v2 blank
Then, I run ionic serve from inside the second project's folder and the first one is actually loaded, not the second one.
What did I miss?
I didn't try to clear the browser history but I remembered that I did play around with Service Workers in my first app, it was a PWA.
So I ran ionic serve then opened Chrome's Developer Tools and found out that it was still there, so I Unregistered the service worker and deleted it under the Cache Storage section.
Stopped and ran ionic serve again and it loads the right app now.
This is how I solved this issue.
Chrome was still using the cache from that previous app. I ran ionic serve it loaded my wrong app, then I opened the Developer Tools, and under Applications tab, Service Workers option, it was there.
I clicked the 'Unregister' option, then under 'Cache Storage' section I deleted the registered previous application's cache with the right click option. This solved my problem.
Related
As ionic5 is now released, so now when I use this command ionic start myApp blank --type=angular ionic5 app is created, I can confirm this from ionic info command, I am wondering how can I create ionic4 project. The reason behind creating ionic4 project is I have one app in ionic3 and I want to upgrade that app to first in ionic4 and then to ionic5 instead of directly going to latest one because I don't yet know the breaking changes in ionic5 yet and I haven't yet worked on it as well
okay, I got ionic4 app by first creating project with command sudo ionic start myApp blank --type=angular and then when project was created, then using sudo npm i #ionic/angular#^4.0.0 inside app directory to update the ionic info, this can be confirmed both via package.json and ionic info command
I’m unfortunately having difficulty deploying my ionic project for web. No matter what I do, commands such as 'ionic build, ‘ionic build --prod’, ‘ng build --prod’, or whatsoever always create a www folder that is incorrect. The index.html in this www folder is always blank when viewed from a browser.
I’ve tested this issue on other ionic projects as well (just generated some from templates) and the same issue occurs here, with the index.html in the www folder always being displaying a blank site. If possible, I’d appreciate any help if that’s OK!
ionic cordova platform add browser
ionic cordova run browser
ionic cordova build browser --prod
For testing purpose use ionic serve . It will rebuild automatically every time when you update your code.
have you changed the base href in index.html from
base href="/"
to
base href="."
I just created a draft app using ionic and wanted to see it on the browser using
ionic serve
but ran into an issue:
it kept failing to open the browser and I had to open Firefox manually. so I was curious if there is a way around this? managing permissions and stuff.. or I have to live with it!
Thanks for your insights
ionic serve don't know which browser to run, so, add a default browser.
ionic serve -f firefox
Both ionic serve and ionic run are not reflecting any of my latest changes. ionic serve is showing them from a few hours ago, and ionic run is showing them from about an hour later. Since then, I've discarded all my changes, and created a new branch from the parent--yet it's still showing those same versions from a few hours ago on the first branch. In short, there's code showing up that I don't have in any files in this, or any, branch. And no uncommitted changes.
Your system information:
Cordova CLI: 6.5.0
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
ios-deploy version: 1.9.0
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v6.10.1
Xcode version: Xcode 8.3.1 Build version 8E1000a
I've tried things including ionic state restore and ionic state reset as well as removing and adding platforms back manually.
Also, this is what shows up in my console currently:
Static file server running # http://localhost:8000/index.html
CTRL + C to shut down
200 /service-worker.js
Whereas it previously displayed a list of html, css, etc. requests when the page loaded. Currently, I can make it work as expected by unregistering and removing all ServiceWorkers at chrome://serviceworker-internals/ and chrome://inspect/#service-workers
#stephen, it's been some time now, but I faced a similar issue before. Turns out I had registered the service worker that ships with projects created with the CLI, check your index.html and see if the lines that register the service worker are commented out. If they are you may be having a different problem, if they aren't and you didn't plan to use a service worker, comment them out again, and on your browser (you said chrome), after running ionic serve, open "Inspect" (Ctrl+Shift+I), go to the "Application" tab - "Service Workers" and unregister it.
This happens because the service worker that ships with new projects created using the cli will cache all resources, next time you update your code the browser will load the previous version, that's why you don't see the changes.
Hope it helps
Open the developer console, right click on the button to reload the page and click on empty cache and reload in a forced way (Last option).
my ionic project works fine with ionic serve --lab ,but while copied the.apk file in build folder to my phone and install the app but blank screen appears ,
Please can anyone suggest what might be my problem
my app is using google maps,key is provieded for both app and browser in index.html
Have you tried running it in the emulator ? Since its much easier to see the error logs . Try ionic emulate android -l or ios -l (whichever OS you are building for) and then once the execution starts run the command consolelogs it will log all the activity and you will have a better understanding about why its not working.
+1 for using Chrome Remote Debugging feature. It give you the same output as you would receive from running you app in the browser.
Additionally, I have found that sometimes if your app is already compiled, the ionic CLI doesnt always copy your current files into the APK, and uses the older cached files instead. If you are banging your head against the wall, run the following commands to make sure you have your latest code in your APK.
ionic platform remove android
ionic platform add android
ionic run android
I suggest you use the Chrome Remote Debugging feature. I encountered the same, and looked for answers to my symptom for hours. Once I connected to the chrome remote debugger, I got the console.log back, and noticed there was a problem in my routing setup.
It was a problem with ionic CLI. I've updated it to the latest and reinstalled all dependencies.