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

ionic-v1
1

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.
http://errors.angularjs.org/1.4.3/$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:

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

<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/ionic.app.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>
</head>

<body ng-app="starter">
    <ion-nav-view></ion-nav-view>
</body>

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

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

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

3

Hmm, it could possibly be that, I will try to comment it out and give you feedback.
Btw this is the tutorial I followed: https://blog.nraboy.com/2015/08/using-charts-in-your-ionic-framework-mobile-app/

4

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

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

6

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?