AngularJS and RequireJS: Module not available

Question

I'm trying to get AngularJS to work with RequireJS, but it can't find my custom module. If I inject all scripts inline with no changes, it works, so I know it's a problem with RequireJS and dependencies.

Chute source: http://chute.github.io/angular-chute/

RequireJS config shim:

shim: {
    'angular': {
        exports: 'angular'
    },
    'angular.resource': {
        deps: ['angular'],
    },
    'chute': {
        deps: ['angular.resource'],
    },
    'chute.resource': {
        deps: ['chute']
    },
    'chute.asset': {
        deps: ['chute']
    },
    'chute.heart': {
        deps: ['chute']
    }
}

HTML:

    <div class="wall" ng-app="socialImages" ng-controller="MainCtrl">

        <div class="wall-item" ng-repeat="asset in assets">
            <img ng-src="{{asset.url}}/w/300" width="300">

            <div class="like icon-star" ng-class="{'active': asset.hearted()}" ng-click="asset.toggleHeart()"></div>

            <p>{{asset.caption}}</p>

            <ng-pluralize class="likes" count="asset.hearts" when="{'one':'1 like', 'other':'{} likes'}"></ng-pluralize>
            </div>

            <a class="load-more button" ng-show="assets.hasMore()" ng-click="assets.nextPage()">Load more</a>
      </div>

JS:

define(['angular', 'angular.resource', 'chute', 'chute.resource', 'chute.asset', 'chute.heart'], function(angular){

    'use strict';

    var socialImages = angular.module('socialImages', ['chute']);

    socialImages.controller('MainCtrl', ['$scope', 'Chute.API.Asset', function($scope, Asset) {
        $scope.assets = Asset.query({album: 'azpQsjmn', perPage: 3});
    }]);

});

When I load the page, the following console errors appear after editing angularJS for more descriptive error messages.

[$injector:nomod] Module 'ngLocale' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

angular.js:63 [$injector:nomod] Module 'socialImages' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

angular.js:63 [$injector:modulerr] Failed to instantiate module socialImages due to:

Error: [$injector:nomod] Module 'socialImages' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I've already tried the domReady module and multiple RequireJS dependency variations.

depiction · Accepted Answer · 2015-08-06 20:04:35Z

1

I got help from another developer and was able to resolve it. The main change was removing ng-app from the HTML then bootstrapping the app name after page load.

angular.module('socialImages', ['chute'])
.controller('MainCtrl', ['$scope', 'Chute.API.Asset', function($scope, Asset) {
    $scope.assets = Asset.query({album: 'id', perPage: 6});

}])

angular.element(document).ready(function() {
    angular.bootstrap($('.images-block'), ['socialImages']);
});

answered Aug 6, 2015 at 20:04

depiction

8198 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

robrich · Accepted Answer · 2015-08-05 19:08:34Z

0

The up-side of using require with angular is you don't need all the script references at the bottom of the page. The down-side is you have two IoC containers to work with. In this case, it looks like you've registered Chute with require but not with Angular. You'll likely need something like this:

angular.module('Chute', []).service('Chute.API.Asset', function (...

answered Aug 5, 2015 at 19:08

robrich

13.3k7 gold badges39 silver badges63 bronze badges

Collectives™ on Stack Overflow

AngularJS and RequireJS: Module not available

RequireJS config shim:

HTML:

JS:

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

RequireJS config shim:

HTML:

JS:

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related