Phonegap, AngularJS and RequireJS

Question

Im trying to integrate AngularJS+RequireJS to make a Phonegap project. I have all running on PC but when I build project in Phonegap I have these errors in LogCat:

05-07 13:55:38.008: E/Web Console(10987): Uncaught Error: Script error for: angular 05-07 13:55:38.008: E/Web Console(10987): http://requirejs.org/docs/errors.html#scripterror at file:///android_asset/www/libs/require.js:138

05-07 13:55:45.058: E/Web Console(10987): Uncaught Error: Load timeout for modules: ui.router 05-07 13:55:45.058: E/Web Console(10987): http://requirejs.org/docs/errors.html#timeout at file:///android_asset/www/libs/require.js:138

The Index.html

<script src="libs/require.js"></script>
<script>
  require(['require', './js/config-require'], function (require, config) {
    config.urlArgs = 'bust=v0.4.0';
    window.require.config(config);

    require(['./js/main.js']);
  });
</script>

config-require.js

define({
  paths: {
    'angular'       : '../libs/angular',
    'async'         : '../libs/async',
    'domReady'      : '../libs/domReady',
    'ngResource'    : '../libs/angular-resource',
    'ui.router'     : '../libs/angular-ui-router'
  },

  shim: {
    'angular': {
      'exports': 'angular'
    },
    'ngResource': ['angular'],
    'ui.router' : ['angular']
  }
});

main.js

define([
  'require',
  'angular',
  './app'
], function (require, angular) {
  'use strict';

  require(['domReady!'], function (document) {
    angular.bootstrap(document, ['app']);
  });
});

app.js

define([
  'angular',
  'ui.router',
  './config',
  './modules/home/index'
], function (ng) {
  'use strict';

  return ng.module('app', [
    'app.constants',
    'app.home',
    'ui.router'
  ]).config(['$urlRouterProvider', function ($urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
  }]);

});

Anyone can help me to configure it?

Answer 1

The solution was to set up baseUrl in config-require.js file

Answer 2

Use SeaJs + AngularJs instead

Recently I was trying to implement requirejs in cordova. I went through most of the related post here, none of these solution works.

So I turn to try Seajs, Seajs follows the CommonJS Spec pretty much the same as Nodejs does.

In Sea.js source code, hide the global define method by replacing global.define = Module.define with seajs.define = Module.define.

in index.html

<script type="text/javascript" src="sea-debug.js"></script>
<script>
seajs.config({
    alias: {// similar to shim as in requirejs
    "angular": "lib/angular.js"
    }
});
seajs.use('app.js', function(app) {
    app();
});
</script>

in app.js

seajs.define(function(require, exports, module) {
    module.exports = function() {
        require('angular');//angular is loaded, you can use angular directly
        var app = angular.module('App',[]);
        require('./test.js')();//test test test
    };
});

in test.js

seajs.define(function(require, exports, module) {
    module.exports = function() {
        console.log('test test test');
    };
});

Then you are ready to go!