AngularAMD + RequireJS: Failed to instantiate module ngStorage

Question

Truly turning crazy over this one:

I am trying to combine AngularJS and RequireJS. After several failed attempts I turned to AngularAMD. I followed the basic process, but I keep getting this nasty error:

Failed to instantiate module ngStorage due to: Module 'ngStorage' is not available! You either misspelled the module name or forgot to load it...

ngStorage is a simple 3rd party Angular module.

Here's my main.js:

require.config({
  paths: {
    angular: 'js/angular.min',
    angularAMD: 'js/angularAMD.min',
    ngload: 'js/ngload.min',
    ngStorage: 'js/ngStorage.min'
  },
  shim: {
    angularAMD: ['angular'],
    ngload: ['angularAMD'],
    ngStorage: ['angular'] // Also tried with ['angularAMD'], and without this line at all
  },
  deps: ['js/app']
});

And my app.js:

define(['angularAMD','ngStorage'], function(angularAMD) {
    var app = angular.module('tyleApp', ['ngStorage']);
    return angularAMD.bootstrap(app);   // Fails here...
});

I removed everything else from the app, and it just fails here... What am I doing wrong?

Note: I also tried with:

define(['angularAMD','ngload!ngStorage'], function(angularAMD) {

But then I get:

angularAMD not initialized. Need to call angularAMD.bootstrap(app) first.

Answer 1

ngStorage has already defined followed AMD, so you don't need to write shim for that.

require.config({
  paths: {
    angular: 'js/angular.min',
    angularAMD: 'js/angularAMD.min',
    ngload: 'js/ngload.min',
    ngStorage: 'js/ngStorage.min'
  },
  shim: {
    angularAMD: ['angular'],
    ngload: ['angularAMD'],

  },
  deps: ['js/app']
});

And in your app.js keep the same name of ngStorage in your paths, this name could be different string, if you name it to another, in your case your app.js looks fine .

e.g. if you use another name in paths , let's say, in paths:
angularStorage: 'js/ngStorage.min'

your apps.js will be :

define(['angularAMD','angularStorage'], function(angularAMD) {
    var app = angular.module('tyleApp', ['ngStorage']);
    return angularAMD.bootstrap(app);   
});

So, you use 'angularStorage' as you defined in requireJS, and the angular.module() will still use the module name 'ngStorage' , that is defined in ngStorage source code.