Search code examples
androidangularcordovaangular6cordova-plugins

deviceready Event not fired in an Angular hybrid app


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 !


Solution

  • 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