Why I can't find 'angular' in in a module with angularAMD?

Question

I'm working with AngularAMD and I'm trying to "load" angular.easypichart module.

Here is my architecture:

--js
----app.js
----main.js
--lib
----angular.easypiechart.js
----ngload.js

In my main.js I've got that code:

require.config({
    baseUrl: "js",
    paths: {
        'angular': 'https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular',
        'angular-route': 'https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route',
        'angularAMD': 'https://cdn.jsdelivr.net/angular.amd/0.2/angularAMD.min',
        'ngload': '../lib/ngload',
        'easypiechart': '../lib/angular.easypiechart'
    },
    shim: {
        'angularAMD': ['angular'],
        'angular-route': ['angular'],
        'ngload': ['angularAMD'],
        'easypiechart': ['angular']
    },
    deps: ['app']
});

And in my app.js :

define(['angularAMD', 'angular-route', 'easypiechart'], function (angularAMD) {
    'use strict';

    var app = angular.module('guess-bg', ['ngRoute']);
    // config, etc.

    return angularAMD.bootstrap(app);
});

But 'easypiechart' fail and I get the error Cannot read property 'module' of undefined

I don't get it because I used ['angular'] in shim for easypiechart.

I tried a lot of things such as

define(['angularAMD', 'angular-route', 'ngload!easypiechart']

Or

var app = angular.module('guess-bg', ['ngRoute', 'easypiechart']);

But keep getting errors. It's very obscur to me and I don't even understand how this 'ngload' works. I had no issues with angular-route by the way.

Anyway, I don't know how to simply load this module and it's really annoying...

Could you tell me what I'm missing?

Answer 1

I don't even understand how this 'ngload' works

You don't need ngload if you want to load module directly in your first requireJS module. It is mostly use for lazy load module for your app, for example in /some/random/route/ you want to use an angular module, but only want it to be loaded here. ngload will do the trick.

But 'easypiechart' fail and I get the error Cannot read property 'module' of undefined

In your app.js try to remove 'use strict'; :

define(['angularAMD', 'angular-route', 'easypiechart'], function (angularAMD) {

    var app = angular.module('guess-bg', ['ngRoute', 'easypiechart']);
    // config, etc.

    return angularAMD.bootstrap(app);
});

It may because your enable strict mode. So browser found that angular object wasn't defined anywhere around in app.js therefore you got error of Cannot read property 'module' of undefined.

In another words, angular object does defined and available globally. But since you are in strict mode browser reject to use such global variable. If you still want to use strict mode. Use window.angular instead :

define(['angularAMD', 'angular-route', 'easypiechart'], function (angularAMD) {
    'use strict';

    var app = window.angular.module('guess-bg', ['ngRoute', 'easypiechart']);
    // config, etc.

    return angularAMD.bootstrap(app);
});