Angular + Require + Angular-resources and cookies modules lead to "Error: No module: ngResource"

[Sébastien LEJEUNE]

Hi all, 

I try to make working together Angular and Require.js.

I restarted from github samples found over the internet which are working well but then I need to use angular-resources and angular-cookies modules and it becomes a nightmare.

I tried many configs but I always get at the end the following error: Error: No module: ngResource

For information I'm using angular 1.0.7 and require 2.1.4

If anyone could help, it would be great, thanks !

Here are my files:

app.js

define([

    // Standard Libs

    'Console'      // libs/console/console

    , 'jQuery'     // libs/jquery/jquery

    , 'underscore' // libs/underscore/underscore

    , 'angular'    // libs/angular/angular

    , 'angularResource'    // libs/angular/angular

    , 'angularCookies'    // libs/angular/angular

    // Application Files

    , 'services/services'

    , 'controllers/controllers'

], function (Console, $, _, angular, angularResource, angularCookies, services, controllers) {

    "use strict";

    var initialize = function () {

        Console.group("Starting application.");

        Console.group("Setup Angular");

        var mainModule = angular.module('myApp',['ngResource', 'ngCookies']);

        services.initialize(mainModule);

        Console.info("Services: ", services);

        controllers.initialize(mainModule);

        Console.info("Controllers: ", controllers);

        angular.bootstrap(window.document,['myApp']);

        Console.info("Angular compiled and executed.");

        Console.groupEnd(); // [angular]

        Console.groupEnd(); // [bootstrap]

    };

    return {

        initialize : initialize

    };

});

bootstrap.js

"use strict"; require.config({ paths: { "Console": 'libs/console/console', "jQuery": 'libs/jquery/jquery', "underscore": 'libs/underscore/underscore-min', "angular": 'libs/angular/angular', "angularResource": 'libs/angular/angular-resource.min', "angularCookies": 'libs/angular/angular-cookies.min', "Ol3": 'libs/ol3/ol-simple', "Cesium": 'libs/Cesium/Cesium', "templates": 'partials' }, shim : { angular :{ deps: ['angularResource', 'angularCookies'], exports : "angular" }, angularResource :{ exports : "angularResource" }, angularCookies :{ exports : "angularCookies" } } , urlArgs: 'v=1.0' }); require([ // Standard Libs 'require' , 'Console' , 'jQuery' , 'underscore' , 'angular' , 'Ol3' , 'Cesium' ], function (require, Console, $, _, angular) { Console.group("Bootstrap dependencies loaded. Starting bootstrap."); Console.info("Console", Console); Console.info("jQuery", $); Console.info("underscore: ", _); Console.info("Angular: ", angular); require(['app'], function (App) { Console.group("Starting bootstrap."); Console.info("App: ", App); App.initialize(); Console.groupEnd(); }); Console.groupEnd(); });

Seb

[Mark Schaake]

It looks like you have your dependencies inverted in the requirejs config. Try changing your shim to :

shim : { angular :{ exports : "angular" }, angularResource :{

deps: ['angular'] }, angularCookies :{

deps: ['angular'] } }

No need to export (that I can think of) for angularResource or angularCookies.

[Sébastien LEJEUNE]

Thanks a lot Mark, it works, I'm pretty confused about this dumb misconfig (famous copy/paste pattern), it was so obvious :)

I have been searching everywhere else for few days and tried so much configs (different versions of angular and require) but I forgot the golden rule, take a look back to the basics ... and obvious things ...

Thanks again.

[Hemant]

Hi there,

Recently I am also facing same issue mentioned in this post.  But I am pretty sure I have configured dependencies correctly.  I have posted my question here on stackoverflow.  Can someone help?

Cheers,

Hemant