"device is not defined" : Codrova/Ionic + TypeScript

Question

I am getting the very common device is not defined error when I load my Ionic application in both the browser (via ionic serve) and on my device.

I am new to TypeScript and I think my trouble may be related to some misunderstandings there.

My index.html contains (note that ng-app is missing from my DOM element):

    <link href="css/ionic.app.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

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

    <!-- inject:js -->
    <script src="lib/node_modules/ng-cordova/dist/ng-cordova-mocks.min.js"></script>
    <script src="lib/node_modules/ng-cordova/dist/ng-cordova.min.js"></script>
    <script src="lib/node_modules/ng-cordova/src/plugins/device.js"></script>
    <script src="lib/node_modules/ng-cordova/src/plugins/file.js"></script>
    <!-- endinject -->

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

</head>
<body>

  <div ui-view=""></div>

  <script src="app.js"></script>
  <script src="bootstrapApp.js"></script>

</body>

Here, app.js is compiled from TypeScript. I have quite a bit going on in here, but the interesting part is this:

var App;
(function (App) {
    "use strict";
    angular.module("app", [
        "ionic",
        "ngCordova",
        "ui.router"
    ])
    .config(function ($stateProvider, $urlRouterProvider) {
        $stateProvider.state("splash", {
            url: "/splash",
            templateUrl: "components/splash/splash.html",
            controller: "SplashController"
        });
        $urlRouterProvider.otherwise("/splash");
    });
})(App || (App = {}));
var App;
(function (App) {
    "use strict";
    var DeviceService = (function () {
        function DeviceService($cordovaDevice) {
            this.device = null;
            this.device = $cordovaDevice.getDevice();
            console.log(this.device);
        }
        DeviceService.$inject = ["$cordovaDevice"];
        return DeviceService;
    })();
    angular.module("app").service("DeviceService", DeviceService);
})(App || (App = {}));

To ensure that my device is "ready", I followed a suggestion I found here: https://stackoverflow.com/a/27975700/3817101

So, I have a bootstrapApp.js file that contains:

window.ionic.Platform.ready(function() {
    console.log("platform is ready");
    angular.bootstrap(document, ['app']);
});

On page load, everything appears to be happy, except for the use of $cordovaDevice. My console reads:

platform is ready
ionic.bundle.js:20306 ReferenceError: device is not defined

It's obvious that I'm attempting to use the device before things are "ready" but I can't seem to figure out where I'm going wrong. Any suggestions?

Not sure if you need a specific ionic command, but you need a cordova plugin: `cordova plugin add org.apache.cordova.device` — agmcleod, Jun 16 '15 at 20:01

score 0 · Answer 1 · answered Jun 16 '15 at 23:29

The error is not in the code you posted (you would need something like this.device.foo to get an error and no such .foo in your code).

Solution

The ordering of the JS files can cause this. Change :

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

<!-- inject:js -->
<script src="lib/node_modules/ng-cordova/dist/ng-cordova-mocks.min.js"></script>
<script src="lib/node_modules/ng-cordova/dist/ng-cordova.min.js"></script>
<script src="lib/node_modules/ng-cordova/src/plugins/device.js"></script>
<script src="lib/node_modules/ng-cordova/src/plugins/file.js"></script>
<!-- endinject -->

To :

<!-- inject:js -->
<script src="lib/node_modules/ng-cordova/dist/ng-cordova-mocks.min.js"></script>
<script src="lib/node_modules/ng-cordova/dist/ng-cordova.min.js"></script>
<script src="lib/node_modules/ng-cordova/src/plugins/device.js"></script>
<script src="lib/node_modules/ng-cordova/src/plugins/file.js"></script>
<!-- endinject -->

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

Moving the `ionic.bundle.js` script causes several more problems since that includes Angular. Also, my `device is not defined` error is caused by the line: `this.device = $cordovaDevice.getDevice();` (commenting it out results in no errors in the console) — amlyhamm, Jun 17 '15 at 13:17

"device is not defined" : Codrova/Ionic + TypeScript

1 Answers1

Solution