Chart.js not working when running on device but OK on browser


I have an ionic application that uses chart.js extensively.
Everything is working fine as expected when it is being run on the browser. (using ionic serve). Perfect! However, when running on a device (android) I am getting the following error:

Uncaught SyntaxError: Duplicate data property in object literal not allowed in strict mode
Uncaught ReferenceError: Chart is not defined

and then these errors follow: (I know these errors were caused by the first error but it might help)

Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module chart.js due to:
Error: [$injector:nomod] Module 'chart.js' 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.$injector/nomod?p0=chart.js
at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:8895:12
at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:10785:17
at ensure (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:10709:38)
1at module (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:10783:14)
at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:13189:22
at forEach (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:9163:20)
at loadModules (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:13173:5)
at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:13190:40
at forEach (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:9163:20)
at loadModules

And this is my index.html:

<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="lib/angular-chart/angular-chart.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/" rel="stylesheet">

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="lib/chartjs/Chart.js"></script>
<script src="lib/angular-chart/angular-chart.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/factories.js"></script>

<body ng-app="starter">

and this is app.js, where I mentioned chart.js:

angular.module('starter', ['ionic','chart.js'])

SyntaxError: Duplicate data property in object literal not allowed in strict mode

I have no idea, but looking at there is no mention of adding a <script> for chart.js itself. Possible that this is handled by angular-chart.js?


Hmm, it could possibly be that, I will try to comment it out and give you feedback.
Btw this is the tutorial I followed:


These are normally top notch.

Do you really have the files at these locations?

<script src="lib/chartjs/Chart.js"></script>
<script src="lib/angular-chart/angular-chart.js"></script>


Yes, as I have mentioned: it was working perfectly on the browser therefore the code is referencing the files in /lib/ directory.

I tried to comment out the <script/> tags for /lib/chartjs/Chart.js but it just gave me this error: Uncaught ReferenceError: Chart is not defined at angular-chart.js:11


This might seem strange but everything worked after I commented out the first "use strict" in Chart.js, Line 14.

(function() {

    //"use strict"; //<-- this

    //Declare root variable - window in the browser, global on the server
    var root = this,
        previous = root.Chart;

Can someone please explain why this happened?