2

I am building an all platform Angular 6 APP that is going to be wrapped with Cordova 8.1.2 Unfortunately I cannot make the deviceready event to fire.

I have two separate projects one for Angular and one for Cordova and I am able to build to build the Angular project and create an android apk with the following command:

ng build --prod --base-href . --output-path ../Cordova/CordovaMobileApp/www/ & cd ../Cordova/CordovaMobileApp & cordova run android & cd ../../NxAngularMVI

Now however I need to use Cordova plugins and for that I need to detect the deviceready event.

in my index.html head i have already included:

  <script type=”text/javascript” src=”cordova.js”></script>

and in my main.ts file I am trying to wait for the event to happen to bootstrap my app.

const onDeviceReady = () => {
   console.log('Bootstrap ON!');
   platformBrowserDynamic().bootstrapModule(AppModule).catch(err => 
         console.log(err));
};

document.addEventListener('deviceready', onDeviceReady, false);

The app never initializes because the deviceready event is never fired. I have tried several variation that I have found on stack overflow of this bootstrapping method but to no avail. I have tried reinstalling every cordova part from the framework to the platforms to the plugins but nothing helped. I have tested it on an Galaxy S9 and Motorola G5.

Since this functionality provided by the Cordova API is a must for my project I need your help guys. Thanks !

Ivan Mihaylov
  • 434
  • 2
  • 9
  • does he find (include) the cordova.js ? Try outputting a variable of it somewhere – Joniras Jan 11 '19 at 15:12
  • @Joniras Hi mate. How can I do that exactly. I saw that there is a cordova variable created in the cordova.js file so I tried to declare it on top of the main.ts file `declare let cordova: any;` and then: `const onDeviceReady = () => { console.log('Bootstrap ON!'); console.log(cordova); platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err)); };` And this is what i get: `Uncaught ReferenceError: cordova is not defined` – Ivan Mihaylov Jan 11 '19 at 15:31
  • Double Check the path to the js file and if it is included in your main.js (in the dist folder). I tried to check what variables are defined, what i found is that window.cordova should be defined. So simply output this via `console.log("Cordova: ", window.cordova);` somewhere in a js file that gets executed. Inspecting console output works as stated in the answer below – Joniras Jan 11 '19 at 15:50

2 Answers2

5

As already answered in this thread Is there a way to submit a reactjs PWA on Google Play?, you can debug your cordova application in Chrome console, follow these steps

  1. Connect your device with the application installed ( must be DEBUG version, not release )
  2. Open the Chrome console and near the last tab you should see a three vertical dots icon, click it and select 'more tools', then 'remote devices', you should see your connected device listed. Select it
  3. Find your application in the list and click the 'inspect' button, at this point you should have your application opened also in Chrome browser.

Since the application doesn't boot, you can check the Chrome console for errors, let us know

Cheers

Sergio Rinaudo
  • 2,303
  • 15
  • 20
  • Hi @Sergio. Of course this is how I debug my application. Currently there is nothing there since the app doesn't even bootstrap because the onDevoceReady is never called since deviceready event is never fired. Thanks – Ivan Mihaylov Jan 11 '19 at 15:37
  • 3
    I know that it sounds dumb, could you try remove the cordova script tag from your compiled index.html and rewrite it by hand, I tell you this because I had a similar problem and it ends up that it was a quotes issue ( double quotes was not double quotes ) so cordova.js was never loaded. – Sergio Rinaudo Jan 11 '19 at 16:13
  • Well @Sergio you just solve my day's worth of struggles with this comment. It was the frickin quotes that were different and the cordova.js file was not loading. Thank you !!! – Ivan Mihaylov Jan 11 '19 at 16:24
2

I ran into this exact same issue.

My solution: move <script type=”text/javascript” src=”cordova.js”></script> inside <body>next to <app-root>. When i have the script tag in the <head> deviceready never fires.

I figured this out by looking at the sample project that is generated using the cordova cli. If you look at their index.html they have the script tag in the body.

SanzioSan
  • 224
  • 1
  • 2
  • 12