CODEWITHSUNDEEP
javascriptangularjsdjangoamazon-web-servicesdjango-compressor
nael
nael

Reputation: 1507

JS static files issues in AWS Production Django Application

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

Upvotes: 0

Views: 164

Answers (1)

nael
nael

Reputation: 1507

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.

Upvotes: 0

Related Questions