Adding breezeJS to my Ionic Project Fails with White Screen on install on device


#1

I have a need project the i want to use breezeJS, My ionic project works fine, but when i add breezeJS as dependence to the ionic angular.module, On my chrome carnary and on emulator it works fine, but when i install it on my device i get a white screen.

Is there anything that am missing, Please i need the community help to get this fix.

HTML:

<script src="scripts/breeze.debug.js"></script>
<script src="scripts/breeze.angular.js"></script>
<script src="scripts/breeze.directives.js"></script>
<script src="scripts/breeze.saveErrorExtensions.js"></script>

Javascript:

var app = angular.module('app', [
'ionic',
'starter.controllers',
'starter.services',
'LocalStorageModule', // Angular Local Storage

//// Custom modules 
'common',           // common functions, logger, spinner

///This is where i get the error, but when i remove this part the project works fine
'breeze.angular',    // configures breeze for an angular app
'breeze.directives', // contains the breeze validation directive (zValidate)
])

// Handle routing errors and success events
app.run(['$rootScope', '$ionicPlatform', 'breeze',
function ($rootScope, $ionicPlatform, breeze) {
    $ionicPlatform.ready(function () {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            // org.apache.cordova.statusbar required
            StatusBar.styleLightContent();
        }
    });
}]);

Thanks in advance.


#2

We’re going to need more information unfortunately as well. There are ways to capture logs on the iOS and Android emulator, can you get some of those logs and post them so we can see more of what’s happening?

It could be a few things:

  1. The script isn’t being copied over
  2. Maybe the script is over-writing another dependancies variables
  3. A bug in the mobile browsers.

Oh have you also tried accessing it on your phone? I think you should be able to navigate to the same URL that live reload uses on your phone if you’re on the same wifi and it should pull it up, that might help you uncover the bug too.


#3

Tell me, is any of your libraries located remotely? This sounds like a famous Cordova whitelist problem.

For more information read this: http://www.gajotres.net/whitelist-external-resources-and-api-calls-ionic-framework/


#4

Thanks for your early response,

@NorthMcCormick, Am not sure if any of the three listed issues is the cause, i will like if you could share more light on how to fix with your recomemdation.

@Gajotres, the library that an using is breeeze.js and i dont know if it need to be whitelisted but i will try the option from your link its not working.

But so far this is all i have done:

  1. I created a new ionic application with tabs templates

  2. in the index page i added breeze library source file
    add the breeze dependency to it as it is, i have not started the mobile project at all, all
    i am testing is making sure the breeze library could work without issues before integrating my code to the mobile project

    // Breeze libraries,
    // This is the library that is giving me issues,
    // It is working locally on both browser and android emulator,
    // but not working on device, showing white screen.

angular.module('starter', [
  'ionic', 
  'starter.controllers', 
  'starter.services',

  'breeze.angular' // The Breeze library
  ])

This is the error log from the mobile device using logcat

$ adb logcat | grep -i "console"
- waiting for device -
I/chromium( 2959): [INFO:CONSOLE(12947)] "Uncaught Error: [$injector:modulerr] F
ailed to instantiate module starter due to:

Thanks, am awaiting for your suggestion and fix.


#5

I can when I am back at my computer, it’s the best way to test on a mobile browser environment without building the app.

Was that all the logs that were there? That error

"Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:

Should have something after the “due to:”

That is what is causing the white screen though, and it doesn’t look like it’s the breeze that’s causing it, but the starter.controllers/starter.serivces. Are you 100% sure those exist?


#6

That all the error log i get from the logcat console, If i remove the breeze dependency, it load properly on the device. I think the issues is coming from breeze. The whole project is from a fresh ionic tabs starter, just added the breeze dependency that resulted to the issues.

You can help me reproduce this issues from you end if you have worked with breezeJs before to confirm what the issue will be. sorry for asking too much.

Thanks for staying with me on this issue.

Now, I have additional error:

$ adb logcat | grep -i "console"
I/chromium(13645): [INFO:CONSOLE(12947)] "Uncaught Error: [$injector:modulerr] F
ailed to instantiate module starter due to:
I/chromium(14767): [INFO:CONSOLE(1)] "exception firing pause event from native",
 source:  (1)
I/chromium(14767): [INFO:CONSOLE(12947)] "Uncaught Error: [$injector:modulerr] F
 ailed to instantiate module starter due to:

#7

After so many testing and research, i later get it work,

The issue is with:

<script src="scripts/breeze.debug.js"></script>

I removed it so am left with

<script src="script/breeze.min.js"></script>
<script src="script/breeze.angular.js"></script>

The app.js file will be

var app = angular.module('app', [
  'ionic', 
  'starter.controllers', 
  'starter.services',

  'breeze.angular'    // configures breeze for an angular app
  ])

That resolve the issues.

Thank you all for your help.