0

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.

Eric Leibenguth
  • 4,167
  • 3
  • 24
  • 51

1 Answers1

0

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.

twindai
  • 197
  • 2
  • 13
  • Thanks for your answer @twinday. Unfortunately I tried without the shim (and also with a different require name, as you suggest), but I could not get it to work. Unfortunately I have moved on and given up on require.js... So I cannot experiment new solutions. (I do think the question is relevant though -- I can setup a simple test to check proposals I haven't tried) – Eric Leibenguth Jun 10 '15 at 09:24
  • 1. `paths: { **ngStorage: 'bower_components/ngstorage/ngStorage'** }` – twindai Jun 10 '15 at 10:26
  • 2. bootstrap angular manually : `require([ 'angular', 'ngStorage', 'app' // load app.js ], function(angular, app) { var $html = angular.element(document.getElementsByTagName('html')[0]); angular.element().ready(function() { angular.bootstrap(document, ['widgetApp']); }); });` – twindai Jun 10 '15 at 10:26
  • 3. in app.js: `define([ 'angular' ], function(angular) { var myApp = angular.module('myApp', [ 'ngStorage' ]) })` – twindai Jun 10 '15 at 10:26
  • The solution in your comments seems a bit different from the one in your answer. In particular you don't use angularAMD? Also, what is `widgetApp`? – Eric Leibenguth Jun 10 '15 at 11:16
  • sorry for mistake, the "widgetApp" is from my test code, should be replaced by "myApp" . in step 2, I load "app" as dependency , that is loading app.js and get "myApp" as dependency. angularAMD has nothing to do with ngStorage, and as no side effect to ngStroage in my test. you can include that or not, ngStorage just working there. – twindai Jun 10 '15 at 14:19