LoopBack with Ionic - ionic-framework

I am trying to run a LoopBack server with ionic client, but I am getting the "Error: Cannot GET /cordova.js" error.
My code can be cloned from github at: https://github.com/giladba/BetterTrader2.git
Problem description:
I created a LoopBack application, and at the client directory I created an Ionic tabs application.
After that, I ran these commands on the client directory:
ionic platform add android
ionic build android
In server/middleware.json I redirected the index.html folder to the Ionic www folder like so:
"files": {
"loopback#static": {
"params": "$!../client/www"
}
but when I run node . I get cordova.js not found when I open http://localhost:3000/ in the browser:
note that even though there is an exception the application seems to be working fine.
Any idea how I can fix the exception?

Cordova gets injected into the app when deployed on a mobile device. When you use the ionic serve command locally, for example, cordova.js always 404s. You don't need it unless you're on a mobile device in a cordova app, and it will be deployed automatically in that case.

Related

getting 404 errors while hosting ionic 4 app on a webserver

I'm trying to host my ionic 4 app on a webserver.
I've copied the WWW folder to the server and i'm encountering errors and a white blank screen
I've tried using ionic cordova platform add browser then copy the www folder to my webserver and still same errors.
same thing by running index.html on my local machine.
Do I need a server that supports node to serve my app?
any help would be much appreciated.

ionic 3 publish app as PWA (Progressive Web App)

I want to publish my app as PWA so what i did is
insert this script to index.html
<!--script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script-->
then install
npm run ionic:build --prod
it looks like it deploy it but my questions are:
what files I need to upload to host for publish the app as PWA?
why when I change something in the app and run ionic serve nothing changed and it changed only in the index.html of the WWW folder? why?(because now it's PWA??)
when I open www folder and I run open index.html when i press on button that open alert dialog it not open that. why?
when I run the command? only in the end of development?
Run
ionic cordova platform add browser
ionic build browser --prod --release
Then go to [project_folder]/platforms/browser/www and copy the content at you http server.
Don't bother with Cordova for a PWA. Just use npm run build --prod and upload the /www folder.
PWA is more of a collection of concepts, so it's not just "on" or "off". At a minimum though you probably want to add a manifest file so you can make it more "app like" by hiding the browser frame, setting your icon, app name etc. Uncommenting the line to add service worker doesn't magically make it a PWA if you haven't put anything "useful" into service worker (which you may or may not need to do, depending on how your app works). Also note that you will need HTTPS to use a service worker.
You will also need to manually remove the line from index.html that includes cordova.js (which will be a 404 error if you just upload /www).
I use this command for building web app
ionic cordova build browser
Then copy the contents from IONIC-PROJECT/platforms/browser/www to the web server.

My Ionic app works fine on browser but does not open in my phone

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.

$authWithOAuthPopup flow ending up in auth.firebase.com/blank/page.html

I'm trying to authorize app-users via google in an ionic app based on angularfire. The complete flow is working fine on my workstation's chrome browser (using ionic serve) but fails when deploying on my android device:
$authWithOAuthPopup, when used on Android (via 'ionic run', i.e. installed as apk) results in browser getting stuck in auth.firebase.com/blank/page.html.
All is working fine in html (via 'ionic serve') so I assume, that firebase and google configuration are fine. cordova.js is included properly.
The cordova inapp browser is installed and can open other urls. I have whitelisted firebase(io) and google domains and also allowed everything else. I am using cordova-plugin-inappbrowser 1.0.2-dev "InAppBrowser" and
cordova-plugin-whitelist 1.0.0 "Whitelist". I have tried older versions of the inappbrowser as well.
I am not using ionic livereload to avoid any potential cross-domain/proxy issues
When remote debugging, no errors are being reported: after $authWithOAuthPopup control gets lost somewhere deep in the minified firebase.js code and never returns to angularfire level
The following traffic is generated (detailed urls below):
1) firebase code calls auth.firebase.com/v2//auth/google, 2) accounts.google.com returns to 3)auth.firebase.com/v2.... which transfers to 4) auth.firebase.com/blank/page.html.
On the blank page I can see cookies.
Thanks for any advice in advance...
Detailed URLs from the webflow:
Initiator: firebase.js:147:
https: //auth.firebase.com/v2/gastrohub/auth/google?&v=js-2.2.6&transport=redirect&suppress_status_codes=true&requestId=p2k757pm4hsjv5531z7045voxcyuelsi0wt3&redirectTo=https%3A%2F%2Fauth.firebase.com%2Fblank%2Fpage.html
https: //accounts.google.com/o/oauth2/auth?response_type=code&redirect_uri=https%3A%2F%2Fauth.firebase.com%2Fv2%2Fgastrohub%2Fauth%2Fgoogle%2Fcallback&scope=%20profile&state=%7B%22firebase%22%3A%22gastrohub%22%2C%22requestId%22%3A%22p2k757pm4hsjv5531z7045voxcyuelsi0wt3%22%2C%22redirectTo%22%3A%22https%3A%2F%2Fauth.firebase.com%2Fblank%2Fpage.html%22%2C%22transport%22%3A%22redirect%22%2C%22v%22%3A%22js-2.2.6%22%7D&client_id=434498505800-p5rjvl6basvlsf4fh3t1ta9ej4pt2i28.apps.googleusercontent.com
https: //auth.firebase.com/v2/gastrohub/auth/google/callback?state=%7B%22firebase%22:%22gastrohub%22,%22requestId%22:%22p2k757pm4hsjv5531z7045voxcyuelsi0wt3%22,%22redirectTo%22:%22https://auth.firebase.com/blank/page.html%22,%22transport%22:%22redirect%22,%22v%22:%22js-2.2.6%22%7D&code=4/vgz4uJ8SgIswewKQHcMiXZbwddU_F9llfWKaRfEhOMI
https: //auth.firebase.com/blank/page.html

Running ionic on browser

I am building a hybrid app using ionic 3 .While I try to run it in browser it gives me a "Missing Command Error".It runs on android and ios though.But i wanted to test it on browser too.
Testing your app in a browser is as simple as running the serve command in your project's root folder.
ionic serve
if you want to run in the ionic lab then run command.
ionic serve -l