toastr undefined with requirejs

Question

I am loading toastr.js with require.js in to my angular project however it is not available as global variable.

This is main.js:

require.config({
  baseUrl: 'js',
  paths: {
    domReady: '../lib/requirejs-domready/domReady',
    jquery: '../lib/jquery/jquery',
    jqueryValidate: '../lib/jquery.validation/jquery.validate',
    underscore: '../lib/underscore/underscore',
    bootstrap: '../lib/bootstrap/dist/js/bootstrap',
    moment: '../lib/momentjs/moment',
    toastr: '../lib/toastr/toastr',
    angular: '../lib/angular/angular',
    ngAnimate: '../lib/angular-animate/angular-animate',
    'ui.router': '../lib/angular-ui-router/release/angular-ui-router',
    'chieffancypants.loadingBar': '../lib/angular-loading-bar/build/loading-bar',
    uuid4: '../lib/angular-uuid4/angular-uuid4',
    'ui.bootstrap': '../lib/angular-bootstrap/ui-bootstrap',
    'ui.bootstrap.tpls': '../lib/angular-bootstrap/ui-bootstrap-tpls',
    xeditable: '../lib/angular-xeditable/dist/js/xeditable',
    Restangular: '../lib/restangular/dist/restangular',
    ngCookies: '../lib/angular-cookies/angular-cookies'
  },
  shim: {
    angular: {
      exports: 'angular'
    },
    Restangular: {
      deps: ["underscore", "angular"]
    },
    'ui.router': {
      deps: ['angular']
    },
    'ui.bootstrap': {
      deps: ['angular', 'ui.bootstrap.tpls']
    },
    underscore: {
      exports: '_'
    },
    bootstrap: {
      deps: ['jquery']
    },
    toastr: {
      deps: ['jquery'],
      exports: 'toastr'
    },
    jquery: {
      exports: 'jquery'
    }
  },
  deps: ['boot']
});

boot.js:

define([
  'require',
  'angular',
  'bootstrap',
  'app'
], function (require, ng) {

  'use strict';

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

});

Here is the module is required in the app.js. It relies on toastr:

define([
  'angular',
  'ui.router',
  'ngCookies',
  'toastr'
], function (ng) {

  'use strict';

  var module = ng.module('wb.common', [
    'ui.router',
    'ngCookies'
  ]);

  return module;

});

I see toastr.js loaded but it is not created as global variable. So window.toastr is undefined. I am exporting in toasr in the shim...

Any ideas why taostr is not available as global variable?

Thanks

Answer 1

Never mind, by looking at the source of toastr (end of toastr.js), it makes itself available as module. The service using the toastr needed to change from:

  define(['../module'], function (module) {

  'use strict';

  module.factory('NotifierSvc', ['$log', function ($log) {
    return {
      info: function (msg) {
        toastr.info(msg);
        $log.info(msg);
      },
      warning: function (msg) {
        toastr.warning(msg);
        $log.warn(msg);
      },
      error: function (msg) {
        toastr.error(msg);
        $log.error(msg);
      },
      success: function (msg) {
        toastr.success(msg);
        $log.log(msg);
      }
    }
  }]);

});

to this:

  define(['../module', 'toastr'], function (module, toastr) {

  'use strict';

  module.factory('NotifierSvc', ['$log', function ($log) {
    return {
      info: function (msg) {
        toastr.info(msg);
        $log.info(msg);
      },
      warning: function (msg) {
        toastr.warning(msg);
        $log.warn(msg);
      },
      error: function (msg) {
        toastr.error(msg);
        $log.error(msg);
      },
      success: function (msg) {
        toastr.success(msg);
        $log.log(msg);
      }
    }
  }]);

});