When using slush, the order of script loading results in error

[patrickmcelwee]

James Kerr ran into this, and I confirmed: with a vanilla slush app, relying on wiredep to inject scripts into index.html, working through the QuickStart steps results in an error:

angular.js:12783 TypeError: angular.element(...).lodlive is not a function
    at ml-lodlive-ng.js:21
    at Scope.$digest (angular.js:16203)
    at Scope.$apply (angular.js:16467)
    at done (angular.js:10852)
    at completeRequest (angular.js:11050)
    at XMLHttpRequest.requestLoaded (angular.js:10991)

There is a workaround, by moving ml-lodlive.complete.js before angular.js in index.html. But, since ml-lodlive.complete.js relies on jQuery, jquery.js has to go to the top of the list. (Looking through some forums, it might actually be preferable to load jQuery first ... but that is an issue for slush itself)

[patrickmcelwee]

I propose adding two more steps to the QuickStart documentation for those using wiredep (which includes those using a slush-generated app, of course). In the wiredep task in gulpfile.js, they should add two lines in order to add two exclusions to the options:

  var options = config.getWiredepDefaultOptions();
  options.exclude.push('bower_components/jquery/dist/jquery.js');
  options.exclude.push('bower_components/ml-lodlive/dist/ml-lodlive.complete.js');

Then, in index.html, they add those dependencies explicitly before the <!-- build:js js/lib.js --> tag:

    <script src="/bower_components/jquery/dist/jquery.js"></script>
    <script src="/bower_components/ml-lodlive/dist/ml-lodlive.complete.js"></script>

[grtjn]

The root cause is in the slush template, but I agree the docs could make notes about making sure to put jquery above angular. Just putting jquery above angular in bower.json and rerunning gulp wiredep is enough, got that confirmed today again by someone. I'd rather not go as far to pushing jquery and such outside build and excluding them from wiredep..