Angular UI slider with Require JS fires before jQu

问题:

I am building an AngularJS application using RequireJs, AngularUI and jQuery UI.

I occasionally get the following error when using the slider:

TypeError: Object [object Object] has no method 'slider'
    at init (http://example.com/Assets/js/lib/angular-ui/slider.js?v=635137928871837150:18:29)
    at ngModel.$render (http://example.com/Assets/js/lib/angular-ui/slider.js?v=635137928871837150:55:25)
    at Object. (http://example.com/Assets/js/lib/angular-1.0.7/angular.min.js?v=635137928871837150:140:131)
    at Object.e.$digest (http://example.com/Assets/js/lib/angular-1.0.7/angular.min.js?v=635137928871837150:86:286)
    at Object.e.$apply (http://example.com/Assets/js/lib/angular-1.0.7/angular.min.js?v=635137928871837150:88:506)
    at e (http://example.com/Assets/js/lib/angular-1.0.7/angular.min.js?v=635137928871837150:95:38)
    at p (http://example.com/Assets/js/lib/angular-1.0.7/angular.min.js?v=635137928871837150:98:123)
    at XMLHttpRequest.t.onreadystatechange (http://example.com/Assets/js/lib/angular-1.0.7/angular.min.js?v=635137928871837150:99:259)
angular.min.js?v=635137928871837150:62
(anonymous function) angular.min.js?v=635137928871837150:62
(anonymous function) angular.min.js?v=635137928871837150:52
e.$digest angular.min.js?v=635137928871837150:87
e.$apply angular.min.js?v=635137928871837150:88
e angular.min.js?v=635137928871837150:95
p angular.min.js?v=635137928871837150:98
t.onreadystatechange angular.min.js?v=635137928871837150:99

If I refresh the page the error goes away and it only happens occasionally anyway.

I am using:

• Require version 2.1.8.js
• Current version of Angular Ui Slider (https://github.com/angular-ui/ui-slider/blob/master/src/slider.js)

The relevant parts of my Require Config are:

require.config({
    shim: {
        jqueryui: {
            deps: ['jquery']
        },
        'angular': { 'exports': 'angular' },
        angularResource: { deps: ['angular'] },
        angularMocks: { deps: ['angular'] },
        angularSortable: { deps: ['angular', 'jquery', 'jqueryui'] },
        angularSlider: { deps: ['angular', 'jquery', 'jqueryui'] }
    },
    paths: {
        angular: '/Assets/js/lib/angular-1.0.7/angular.min',
        angularResource: '/Assets/js/lib/angular-1.0.7/angular-resource.min',
        angularMocks: '/Assets/js/lib/angular-1.0.7/angular-mocks',
        angularSortable: '/Assets/js/lib/angular-ui/sortable',
        angularSlider: '/Assets/js/lib/angular-ui/slider',
        jquery: '/Assets/js/lib/jquery-1.9.1.min',
        jqueryui: '/Assets/js/lib/jquery-ui-1.10.0'
    }
});

I am bootstrapping my application like so:

require(['require', 'jquery', 'jqueryui', 'angular', 'angularResource', 'angularSortable', 'angularSlider'],
    function (require, $, jqueryui, angular) {

        'use strict';

        var contentApp = angular.module('testApp', ['ngResource', 'ui.sortable', 'ui.slider']);

        require(['TestController'],
            function () {
            $(document).ready(function () {
                var $angularRootElement = $('#wrapper');

                angular.bootstrap($angularRootElement, [contentApp['name']]);

                $angularRootElement.addClass('ng-app');
            });
        });
    }
);

I presume the problem is that occasionally jQuery UI hasn't loaded before the Angular UI slider code runs. Although, I can see in the network tab in Chrome that jQuery UI was downloaded before the slider.

Can anyone give me some ideas on how to debug this?

Thanks