[SOLVED] Refused to execute script in controller files because its MIME type ('image/gif)?

ionic-v1
1

I started develope this Ionic application from the “Ionic starter” template. It has only one controller file “controllers.js”. But when i split the “controllers.js” file into many controller files. The app crashed (white screen on start). Strangely, The app only crash on “Xiaomi Redmi note 2” and “Sony Z3 compact”. It runs normaly on “ionic serve”, Nexus 7 and Motorola G without any problem.

Here’s the console log and my index.html:

image

<!DOCTYPE html>
<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="css/style.css" rel="stylesheet">
    

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ionic-service-core/ionic-core.js"></script>
    <script src="lib/ionic-service-push/ionic-push.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>


    <!-- Auth0 Lock -->
    <script src="lib/auth0-lock/build/auth0-lock.js"></script>
    <!-- auth0-angular -->
    <script src="lib/auth0-angular/build/auth0-angular.js"></script>
    <!-- angular storage -->
    <script src="lib/a0-angular-storage/dist/angular-storage.js"></script>
    <!-- angular-jwt -->
    <script src="lib/angular-jwt/dist/angular-jwt.js"></script>
    <!-- Firebase dependencies -->
    <script src="lib/firebase/firebase.js"></script>
    <script src="lib/angularfire/dist/angularfire.js"></script>
    <!-- angular momment calculate time-->
    <script src="lib/moment/moment.js"></script>
    <script src="lib/angular-moment/angular-moment.js"></script>


    <!-- elastic autorezie -->
    <script src="lib/angular-elastic/elastic.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <!--<script src="js/controllers.js"></script>-->
    <script src="js/MainCtrl.js"></script>
    <script src="js/AccountCtrl.js"></script>
    <script src="js/FavoriteCtrl.js"></script>
    <script src="js/GivCtrl.js"></script>
    <script src="js/GivDetailCtrl.js"></script>
    <script src="js/LoginCtrl.js"></script>
    <script src="js/MessageCtrl.js"></script>
    <script src="js/MessageDetailCtrl.js"></script>

    <script src="js/services.js"></script>
</head>
    <body ng-app="starter" ng-controller="mainController">
  
      <ion-nav-bar class="bar-stable">
        <ion-nav-back-button></ion-nav-back-button>
      </ion-nav-bar>
  
      <ion-nav-view></ion-nav-view>
    </body>
</html>
2

Anyone know about this issue?

3

Weird…
Try to include type="text/javascript" attribute in your <script> tags

4

I tried that, but it’s still the same :frowning:

5

I findout that something had change the header content type of those controller javascript files? May be because of the browser of those devices.

image
Pasted image974×650 76.8 KB

6

When i add a module for the controllers in "app.js"
Original app.js:

angular.module('starter', ['ionic', 'ngCordova', 'firebase', 'starter.services', 'auth0', 'angular-storage', 'angular-jwt', 'angularMoment', 'monospaced.elastic']); var GIVapp = angular.module('starter');

Changed app.js:

var Givapp = angular.module('starter.controller', []); angular.module('starter', ['ionic', 'starter.controller', 'ionic.service.core', 'ngCordova', 'ionic.service.push', 'firebase', 'starter.services', 'auth0', 'angular-storage', 'angular-jwt', 'angularMoment', 'monospaced.elastic'])

The problem is gone. I don’t know why this happen. Could anyone explains this for me?

7

sometimes magic happens bro. not sure what went wrong.