CODEWITHSUNDEEP
cordovafamous-angular
Geoffrey Lalloué
Geoffrey Lalloué

Reputation: 1464

White page with Famo.us/Angular starter kit on Cordova app

I'm trying to do Famo.us/Angular app and create Android app with Cordova. I'm using starter kit (http://famo.us/integrations/angular/#/download) and made just some minor changes to build with grunt:

To build app, i do next commands : - bower install - cordovacli build - cordovacli run

Build is done, and everything seems to work fine. But when app is launched on android device, i have a white page. In logs i have this :

D/CordovaLog( 8978): file:///android_asset/www/bower_components/famous/famous-global.js: Line 434 : Uncaught TypeError: Object [object DOMWindow] has no method 'requestAnimationFrame'

E/Web Console( 8978): Uncaught TypeError: Object [object DOMWindow] has no method 'requestAnimationFrame':434

D/CordovaLog( 8978): file:///android_asset/www/bower_components/angular/angular.js: Line 3906 : Uncaught Error: [$injector:modulerr] Failed to instantiate module integrationApp due to:

D/CordovaLog( 8978): Error: [$injector:modulerr] Failed to instantiate module famous.angular due to:

D/CordovaLog( 8978): ReferenceError: famous is not defined

D/CordovaLog( 8978):     at new <anonymous> (file:///android_asset/www/bower_components/famous-angular/dist/famous-angular.js:21:28)

D/CordovaLog( 8978):     at invoke (file:///android_asset/www/bower_components/angular/angular.js:3966:17)

D/CordovaLog( 8978):     at Object.instantiate (file:///android_asset/www/bower_components/angular/angular.js:3977:23)

D/CordovaLog( 8978):     at provider (file:///android_asset/www/bower_components/angular/angular.js:3833:36)

D/CordovaLog( 8978):     at Object.provider (file:///android_asset/www/bower_components/angular/angular.js:3825:16)

D/CordovaLog( 8978):     at file:///android_asset/www/bower_components/angular/angular.js:3885:37

D/CordovaLog( 8978):     at forEach (file:///android_asset/www/bower_components/angular/angular.js:325:18)

D/CordovaLog( 8978):     at loadModules (file:///android_asset/www/bower_components/angular/angular.js:3872:5)

D/CordovaLog( 8978):     at file:///android_asset/www/bower_components/angular/angular.js:3879:40

D/CordovaLog( 8978):     at forEach (file:///android_asset/www/bower_components/angular/angular.js:325:18)

D/CordovaLog( 8978): http://errors.angularjs.org/1.2.26/$injector/modulerr?p0=famous.angular&p1=ReferenceError%3A%20famous%20is%20not%20defined%0A%20%20%20%20at%20new%20%3Canonymous%3E%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Ffamous-angular%2Fdist%2Ffamous-angular.js%3A21%3A28)%0A%20%20%20%20at%20invoke%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.js%3A3966%3A17)%0A%20%20%20%20at%20Object.instantiate%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.js%3A3977%3A23)%0A%20%20%20%20at%20provider%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.js%3A3833%3A36)%0A%20%20%20%20at%20Object.provider%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.js%3A3825%3A16)%0A%20%20%20%20at%20file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.js%3A3885%3A37%0A%20%20%20%20at%20forEach%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.js%3A325%3A18)%0A%20%20%20%20at%20loadModules%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.js%3A3872%3A5)%0A%20%20%20%20at%20file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.js%3A3879%3A40%0A%20%20%20%20at%20forEach%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.js%3A325%3A18)

If i take a look on index.html, famous is included and path is good :

<!-- bower:js -->
    <script src="bower_components/underscore/underscore.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>

    <script src="bower_components/famous/famous-global.js"></script>
    <script src="bower_components/famous-angular/dist/famous-angular.js"></script>
    <!-- endbower -->

I feel that "famous-angular.js" do not find "famous" but it's included on "famous-global.js".

PS : if i build it in my web browser, it works fine.

Does any one have an idea? Please share.

Upvotes: 1

Views: 514

Answers (1)

Geoffrey Lallou&#233;
Geoffrey Lallou&#233;

Reputation: 1464

Thanks to @pasine help.

The source of the problem is the version of android.

'requestAnimationFrame' is only supported with android 4.4+ version. Next errors arising from the first.

I don't have these errors on android 4.4.

Famo.us compatibility reminder :

  • iOS: 4.3+
  • Android: JellyBean+

there are workarounds for this problem :

Upvotes: 2

Related Questions