CODEWITHSUNDEEP
angularjsgrailsasset-pipeline
Paul Waldo
Paul Waldo

Reputation: 1233

Grails Asset Pipeline not giving proper Javascript order

I'm creating an Angular app on Grails 3.1.5 and asset pipeline is not giving me the Javascript file ordering I need. I have the following Javascript files:

angello.js

//= require /angular/angular
//= require /angular-route/angular-route
//= require /angello/core/angello.core
//= require /angello/index/angello.index
//= require /angello/common/angello.common
//= require /angello/storyboard/angello.storyboard

var myModule = angular.module("Angello", [
    "angello.core",
    "angello.index",
    'ngRoute',
    'Angello.Common',
    'Angello.Storyboard'
]);

myModule.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'assets/angello/storyboard/tmpl/storyboard.html',
            controller: 'StoryboardCtrl',
            controllerAs: 'storyboard'
        })
});
myModule.controller('MainCtrl', function() { });

angello.storyboard.js

//= require_tree services
//= require_tree controllers
//= require_tree directives
//= require_tree templates
//= require_self

angular.module('Angello.Storyboard', ['Angello.Common']);

storyboardController.js

//= require /angular/angular
//= require /angello/storyboard/angello.storyboard
//= require_self

angular.module('Angello.Storyboard')
    .controller('StoryboardCtrl', function() {
        var storyboard = this;
    });

I include all of this in my main GSP with <asset:javascript src="angello.js" /> When the HTML is rendered, the order of the JS files are not what I expect:

<script type="text/javascript" src="/assets/angular/angular.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angular-route/angular-route.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angular/angular-resource.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angello/core/angello.core.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angello/core/services/DomainServiceFactory.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angello/index/angello.index.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angello/index/services/applicationDataFactory.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angello/index/controllers/indexController.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angular/ui-bootstrap-tpls.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angello/common/angello.common.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angello/storyboard/controllers/storyboardController.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angello/storyboard/angello.storyboard.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angello.js?compile=false" ></script>

The problem is that storyboard JS files are included in the order opposite of what I need, resulting in angular complaining

Error: [$injector:nomod] Module 'Angello.Storyboard' 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 think this is a problem in the way I have structured the dependency directives. I have tried many different things, but nothing seems to affect the order.

Upvotes: 1

Views: 459

Answers (1)

dmahapatro
dmahapatro

Reputation: 50245

The module which is used to create the artifacts like controller, service, etc has to be loaded first before the dependents are loaded. In the above case controllers are required before the module itself.

So, when the controller (styoryBoardController.js) is required it complains about the module not being present.

Moving //= require_self to the top in angello.storyboard.js will ensure that the module itself is required first then the dependencies.

Upvotes: 1

Related Questions