search

grtjn / ml-lodlive-ng

Angular directive that wraps around Matt's ml-lodlive project
http://grtjn.github.io/ml-lodlive-ng
Apache License 2.0
0 stars 2 forks source link

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

Open patrickmcelwee opened 8 years ago

patrickmcelwee commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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..