AngularAMD load module in directive (like underscore)

Question

I'm trying to use the angularAMD module with my project, using custom directives. In these directives I have to use external modules, such as underscore, but I can not load these modules only in the directive.

main.js

require.config({
baseUrl: "app",
paths: {
    'angular': 'vendor/angular.min',
    'angular-ui-router': 'vendor/angular-ui-router.min',
    'angularAMD': 'vendor/angularAMD.min',
    'ngload': 'vendor/ngload.min',
    'underscore': 'vendor/angular-underscore-module',
    'ui-bootstrap': 'vendor/ui-bootstrap.min',
    "jqueryCli": "../assets/js/jquery.min",
    "bootstrapCli": "../assets/js/bootstrap",
    "bootstrapSideCli": "../assets/js/bootstrap-sidebar",
    "underscoreCli": "../assets/js/underscore",
    "mpGrid": "shared/mpGrid/mpGrid",
    "i18nService": "vendor/angular-locale_it-it"
},
shim: {
    'angularAMD': ['angular'],
    'angular-ui-router': ['angular'],
    'underscore': ['angular', 'underscoreCli'],
    'bootstrapCli': ['jqueryCli'],
    'bootstrapSideCli': ['bootstrapCli'],
    'i18nService': ['angular'],
    'mpGrid': ['angular', 'i18nService']
},
deps: ['app']
});

app.js

define(['angularAMD', 'angular-ui-router',
'jqueryCli', 'bootstrapCli', 'bootstrapSideCli', 'underscoreCli',
'shared/sideMenu/sideMenu',
'mpGrid'
], function (angularAMD) {
var app = angular.module("webapp", ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/home");
    $stateProvider
        .state('home',angularAMD.route({
            url: '/home',
            templateUrl: 'home/homeView',
            controller: 'homeCtrl',
            controllerUrl: 'home/homeController'}))
        .state('menu',angularAMD.route({
            url: '/menu',
            templateUrl: 'menu/menuView',
            controller: 'menuCtrl',
            controllerUrl: 'menu/menuController'}));

});
app.constant('appConfig', {
    menu: [
        {value: 'Home', link: '#/home', icon: 'glyphicon-home'},
        {value: 'Menu', link: '#/menu', icon: 'glyphicon-th'}
    ],
    title: 'My Web App'
});
angularAMD.bootstrap(app);
return app;
});

mpGrid.js (my custom directive)

define(['angularAMD'], function (angularAMD) {
 angularAMD.directive('mpGrid', ['underscore', function (_) {
     var test = _;
 }]);
});

When i try to load the view the uses the mp-grid directive, the console shows me this error:

Error: [$injector:unpr] http://errors.angularjs.org/1.4.0/$injector/unpr?
p0=underscoreProvider%20%3C-%20underscore%20%3C-%20mpGridDirective

(same with i18nService >,<)

Anyone can help me please?

I'm going crazy :(

Answer 1

You need to review the dependencies that you are setting, starting by reading the documentation on shim.

For example, for your underscore in your main.js, you set:

shim: {
    ...
    'underscore': ['angular', 'underscoreCli'],
    ...
},

You are telling RequireJS that before underscore is loaded, it need to load angular and underscoreCli.

Then, in your app.js, you load underscoreCli, which has no dependency set:

define([..., 'underscoreCli', ... ], function (...) {

Also, double check if underscore is an angular JS package. If it's not, you need to load it like:

define(['angularAMD', 'underscore'], function (angularAMD, _) {
 angularAMD.directive('mpGrid', function () {
     var test = _;
 });
});