0

I am having a weird issue where angular is undefined when application is deployed in AWS but locally there are no issues in my angular or javascript code.

Update:

My static files (JS, CSS, Images, etc) all live in an S3 static files bucket. There is no problem in retrieving the files, but it seems like suddenly a working commit that has been deployed for months just started raising JS issues when static files are being loaded.

Here are my JS files in my base template:

{% compress js %}
    <script src="{{STATIC_URL}}shared/stacktrace-js/dist/stacktrace.js"></script>
    <script src="{{STATIC_URL}}shared/jquery/2.1.1/jquery.min.js"></script>
    <script src="{{STATIC_URL}}shared/jquery-growl/1.2.3/jquery.growl.js"></script>
    <script src="{{STATIC_URL}}shared/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
    <script src="{{STATIC_URL}}ckeditor/ckeditor-init.js"></script>
    <script src="{{STATIC_URL}}shared/ckeditor-custom/ckeditor-custom.js"></script>
    <script src="{{STATIC_URL}}shared/bootstrap/3.3.5/dist/js/bootstrap.min.js"></script>
    <script src="{{STATIC_URL}}shared/utils.js"></script>
    <script src="{{STATIC_URL}}shared/angular/1.3.11/angular.min.js"></script>
    <script src="{{STATIC_URL}}shared/angular/1.3.11/angular-route.min.js"></script>
    <script src="{{STATIC_URL}}shared/angular/1.3.11/angular-cookies.min.js"></script>
    <script src="{{STATIC_URL}}shared/angular-bootstrap/0.11.0/ui-bootstrap-tpls-0.11.0.min.js"></script>
    <script src="{{STATIC_URL}}shared/bootstrap-multiselect/bootstrap-multiselect.js"></script>
    <script src="{{STATIC_URL}}shared/introjs/intro.js"></script>
    <script type="text/django" src="{{STATIC_URL}}shared/ch-error-logging.js"></script>
    <script type="text/django" src="{{STATIC_URL}}shared/ch-config.js"></script>
    <script src="{{STATIC_URL}}shared/angulartics/dist/angulartics.min.js"></script>
    <script src="{{STATIC_URL}}shared/angulartics-segment/dist/angulartics-segment.min.js"></script>
    <script src="{{STATIC_URL}}shared/chart.js/dist/Chart.min.js"></script>
    <script src="{{STATIC_URL}}shared/select2/dist/js/select2.min.js"></script>
    <script src="{{STATIC_URL}}shared/angular-chart.js/dist/angular-chart.js"></script>
    <script src="{{STATIC_URL}}shared/jquery-validation/dist/jquery.validate.min.js"></script>
    <script type="text/django" src="{{STATIC_URL}}shared/ch-track.js"></script>
    <script type="text/django" src="{{STATIC_URL}}shared/ch-file.js"></script>
    <script src="{{STATIC_URL}}shared/offline.js"></script>
    {% endcompress %}

If I change the jquery.min.js to jquery.js inside or outside the compress block, then other JS files begin raising syntax issues. Usually the error in Chrome's console says

Unexpected token (

And in Firefox, the error says

SyntaxError: function statement requires a name

nael
  • 1,441
  • 19
  • 36
  • Hi, if you could update with the full error description, it would be bit easier to identify the error. `Unexpected token (` is bit vague. – Rumesh Eranga Hapuarachchi Jul 16 '17 at 17:44
  • That is only thing I get in the console. I have other errors in there saying "angular is undefined" which I guess it is because the syntax error stopped js files from loading. – nael Jul 16 '17 at 18:11
  • this sounds like it might have been fixed here: https://github.com/django-compressor/django-compressor/pull/813, have you tried using the development branch of django-compressor? – karyon Jul 16 '17 at 18:23
  • Thank you @karyon Can you please clarify how you think http://github.com/django-compressor/django-compressor/pull/813 fixes my issue. I am not sure I understand. – nael Jul 16 '17 at 18:48
  • All the files inside the {% compress %} tag are concatenated to one. In some circumstances, this can produce invalid output even with valid input files, an example is in the PR. The PR inserts semicolons between the concatenated files to fix that. Even if you think this particular PR does not help, i would suggest you try the current development version :) – karyon Jul 16 '17 at 19:15
  • How do I install the development version of django-compressor using pip? I tried the instructions in github.com/django-compressor/django-compressor readme but it downloads v2.1.1 which does not include the fix – nael Jul 17 '17 at 03:24
  • @karyon I installed the development version and that didn't fix it. – nael Jul 17 '17 at 03:57
  • then i don't know, sorry. I would try removing half of the libs binary-search-style to see which pair of libs causes the problem. i mean, a single library probably works fine (could you verify that?) and the full set produces the bug, so you could try finding the minimal subset that makes the problem show up, and then inspect the resulting file and look where the actual syntax error comes from. – karyon Jul 17 '17 at 06:31

1 Answers1

0

This post helped me figure out which JS files are causing compressed JS errors. Basically, I had issues with directives/controllers construction and by using the ng-strict-di, I found all these issues.

From the AngularJS ngApp documentation. https://docs.angularjs.org/api/ng/directive/ngApp

ngStrictDi (optional) boolean if this attribute is present on the app element, the injector will be created in "strict-di" mode. This means that the application will fail to invoke functions which do not use explicit function annotation (and are thus unsuitable for minification), as described in the Dependency Injection guide, and useful debugging info will assist in tracking down the root of these bugs.

nael
  • 1,441
  • 19
  • 36