RequireJS - “No define call for” several angular related libs

Question

I struggling with understanding why I'm seeing several "No define call for" when attempting to load my angular application. Well I know they are there because I'm using enforeDefine: true, but what is wrong with my code? What do I need to do to satisfy the enforceDefine?

Errors:

main.js

/*global require, requirejs */

'use strict';

requirejs.config({
  enforceDefine: true,
  paths: {
    angular:                ['//cdn.jsdelivr.net/webjars/org.webjars/angularjs/1.4.0/angular.min','../lib/angularjs/angular.min'],
    'angular-messages':     ['//cdn.jsdelivr.net/webjars/org.webjars/angularjs/1.4.0/angular-messages.min','../lib/angularjs/angular-messages.min'],
    'angular-resource':     ['//cdn.jsdelivr.net/webjars/org.webjars/angularjs/1.4.0/angular-resource.min','../lib/angularjs/angular-resource.min'],
    'angular-ui-bootstrap': ['//cdn.jsdelivr.net/webjars/org.webjars/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min','../lib/angular-ui-bootstrap/ui-bootstrap-tpls.min'],
    uiRouter:               ['//cdn.jsdelivr.net/webjars/org.webjars/angular-ui-router/0.2.15/angular-ui-router.min','../lib/angular-ui-router/angular-ui-router.min'],
    bootstrap:              ['//cdn.jsdelivr.net/webjars/org.webjars/bootstrap/3.3.4/bootstrap.min','../lib/bootstrap/js/bootstrap.min'],
    jquery:                 ['//cdn.jsdelivr.net/webjars/org.webjars/jquery/2.1.4/jquery.min','../lib/jquery/jquery.min'],
    async:                  '../lib/requirejs-plugins/src/async'
  },
  shim: {
    angular: {
      exports : 'angular'
    },
    uiRouter: {
      deps: ['angular']
    },
    'angular-ui-bootstrap': {
      deps: ['angular']
    },
    'angular-resource': {
      deps: ['angular']
    },
    'angular-messages': {
      deps: ['angular']
    },
    bootstrap: {
      deps: ['jquery'],
      exports: 'jQuery.fn.popover'
    }
  },
  deps: ['app']
});

app.js

/*global require, requirejs */

'use strict';

define(['angular',
        './controllers',
        './directives',
        './filters',
        './services',
        'bootstrap',
        'jquery',
        'uiRouter',
        'angular-ui-bootstrap',
        'angular-messages',
        'angular-resource',
        'async',
        './gmaps'
        ],
  function(angular, controllers) {

    // Declare app level module which depends on filters, and services
    angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ui.router', 'ngMessages','ngResource','ui.bootstrap']).
      config(['$stateProvider','$urlRouterProvider','$httpProvider', function($stateProvider, $urlRouterProvider, $httpProvider) {

            $httpProvider.defaults.useXDomain = true;
            delete $httpProvider.defaults.headers.common['X-Requested-With'];

            $urlRouterProvider.otherwise('/home');

            $stateProvider

                // HOME STATES AND NESTED VIEWS ========================================
                .state('home', {
                    url: '/home',

                   .... several routes here that I hid

                });

        }]).controller('RouteCtrl', ['$scope','$state', function($scope, $state) {
            $scope.$state = $state;
        }]);

    angular.bootstrap(document, ['myApp']);

});

Answer 1

From this (emphasis mine):

enforceDefine: If set to true, an error will be thrown if a script loads that does not call define() or have a shim exports string value that can be checked .

So the script loaded must either comply with AMD (Angular doesn't) or define an exports in its shim configuration.

Since main is yours, just make it a proper AMD module. The "problem" is that the other scripts ( uiRouter , angular-ui-bootstrap , angular-resource , angular-messages ) do not actually export anything. My suggestion is just re-export angular (or any other global, eg document , but angular seems more relevant) so that you satisfy RequireJS:

requirejs.config({
    ...
    'angular-resource': {
        deps: ['angular'],
        exports: 'angular'
    }, // and so on...
    ...
});

This is a bypass, but I do not think there is any other way, if you insist on using enforceDefine .

Answer 2

You might need to change the require inside the script you specify as being data-main to be a define instead. There has been a issue on GitHub noted that sounds similar to what you are running into.

The library author suggests that if you use the enforceDefine flag then your data-main module should also use a define .