Error encountered while custom building AngularJS/ngCordova in Ionic with injection module

Today I found myself on the edge of madness.

All I wanted to do was add a plugin called ngCordova (specifically cordova-plugin-device) to my project. It seemed simple enough.

I started with an Ionic tabs project, nothing more.

Following some advice, I visited the ngCordova website and created a custom-ng cordova.js file containing only what I needed (for device).

I integrated it into my project at: /www/lib/ngCordova/dist/ng-cordova.js.

Then, I updated my index.html like this:

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

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

<!-- your app's js -->
<script src="js/app.js"></script>...

I added a dependency injection to my application module like so:

   angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova'])

Finally, I made changes to the "DashCtrl" controller to incorporate the plugin:

 .controller('DashCtrl', function($ionicPlatform, $scope, $cordovaDevice) {
  $ionicPlatform.ready(function() {
    $scope.$apply(function() {
            // sometimes binding does not work! :/

            // getting device information from $cordovaDevice
            var device = $cordovaDevice.getDevice();

            $scope.manufacturer = device.manufacturer;
            $scope.model = device.model;
            $scope.platform = device.platform;
            $scope.uuid = device.uuid;

          });

  });
})

When I checked in my browser (under Ripple), I encountered this error:

Uncaught Error: [$injector:modulerr] Failed to instantiate starter module due to:
Error: [$injector:modulerr] Failed to instantiate ngCordova Module due to:
Error: [$injector:modulerr] Failed to instantiate ngCordova.plugins Module due to:
Error: [$injector:modulerr] Failed to instantiate the module device due to:
Error: [$injector:nomod] Module 'device' is not available! Either you misspelled the name or forgot to load the module. If you are registering a module, make sure to specify dependencies as the second argument.

What remains puzzling is that, even without changing anything in my code, simply running:

bower install ngCordova --save

Downloads the full version of ngCordova, and then everything works perfectly.

I'm stumped and hope someone here can help me figure out where I went wrong.

Thank you for taking the time to read my message and for any assistance you may provide (and apologies for any language errors).

Answer №1

The issue lies within the build system.

Locate and open the ngCordova.js file.

    angular.module('ngCordova.plugins', [
      'device'
    ]);

Replace the above code with:

    angular.module('ngCordova.plugins', [
      'ngCordova.plugins.device'
    ]);

Answer №2

Have you added the plugin with this command:

cordova plugin add cordova-plugin-device
?

You can experiment with using the full ng-cordova.js file just to double-check.

Additionally, it's a good practice not to directly write on $scope from the controller. Instead, utilize "controller as <alias>" for defining an alias and registering your variables like so:

controller('DashCtrl', function($ionicPlatform, $scope, $cordovaDevice) {
var self = this;
  $ionicPlatform.ready(function() {
            // sometimes binding does not work! :/

            // retrieving device information using $cordovaDevice
            var device = $cordovaDevice.getDevice();

           self.manufacturer = device.manufacturer;
            self.model = device.model;
           self.platform = device.platform;
            self.uuid = device.uuid;


  });
})`

Then, in your HTML, access it using <alias>.myVarOrFunction

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to switch an element across various pages within Ionic 3?

Is it possible to exchange information between two pages using logic? I have successfully implemented a checklist, but I am unsure how to add a success/error icon next to the Room name on the 'verifyplace.html' page after invoking the goToNextPa ...

Having trouble getting a response after clicking the IONIC select box on your Android device?

When I click the select box on Ionic SELECT, nothing appears on the interface even though the option values are there. After doing some research, I discovered that this is a bug in Ionic where the automatic removal of the 300ms delay causes the app to fee ...

Having trouble retrieving data from mailosaur using protractor, even though it works fine with node.js

I've been trying to incorporate Protractor code with mailosaur for handling email functionality but I'm facing issues retrieving the value while coding in Protractor. Surprisingly, when I run the same code in node.js it works perfectly fine and I ...

Unlock the mystery of identifying which trace is selected in the plot.ly JS legend

When using plot.ly, it is possible to set up a listener for legend click events. I am wondering how to determine which trace in the legend was clicked on. To provide a more specific example, let's say there are two traces (trace0, trace1) in a line gr ...

Angular-Leaflet-Directive layering techniques

I'm currently working on a project that involves implementing clickable markers and shapes on a floor plan. <leaflet layers="layers" markers="markers" ></leaflet> Dealing with the markers has been going smoothly and appears to be quite s ...

Encountering difficulties in fetching data with formData in nextJS

Exploring the realm of NextJS and delving into server side actions. I'm facing a challenge with this specific request. import { revalidatePath } from "next/cache"; export async function submitIPCR(prevState: any, formData: FormData) { / ...

Vue Mutation IndexOf returns a value of -1

Hey everyone! I'm facing a challenge with deleting a "product." Although the product is successfully removed from the database, I'm encountering an issue with removing it from the VuexStore array of products. Here's what I've tried so f ...

Utilize SoundCloud API to generate user profiles according to their unique identification within the system

In my system, I have implemented a process that takes an array of SoundCloud user IDs. These IDs are then iterated through a series of SC.get functions to gather information about each user, such as their user ID, username, followings, and genre preference ...

Is it possible to dynamically update JSON files in AngularJS?

It appears that Angular JS may encounter difficulties updating content in .json files dynamically. I have noticed that I need to restart the server locally for Angular to acknowledge any new data. This behavior seems to be inherent in how AngularJS handl ...

Steps for updating a JSON entry in a Node.js environment

What is the best way to update a JSON value using node.js? I have come across a few examples online, but my situation is a bit more complex. I am able to access the value that needs to be modified var contents = fs.readFileSync("./../../skill.json"); var ...

Updating an object with AngularJS

Let's consider the code snippet below: var absenceType = {name: 'hello'}; this.newAbsenceType = angular.copy(absenceType); After making changes to this.newAbsenceType, you want to apply these changes to the original object. I have explore ...

Transitioning images in JQuery by using a rollover effect

Is there a way to use Jquery for a hover effect that transitions images with a slide up animation? I've looked everywhere online, but I can't seem to find a code that works. All the examples I've found use fadeIn or fadeOut. Thank you for yo ...

Why is IE waiting to load XML content until I access Developer tools?

I'm encountering an issue with my webpage where the product information loaded from an XML file using a jQuery AJAX get request works fine in Firefox and Chrome, but for some reason it doesn't load in Internet Explorer. Oddly enough, it does load ...

Converting UK DateTime to GMT time using Angular

I am currently working on an angular project that involves displaying the start and end times of office hours in a table. For instance, the office operates from 8:30 AM to 5:30 PM. This particular office has branches located in the UK and India. Since u ...

What steps can I take to center the content of my webpage using react bootstrap?

Currently, I am working on creating a desktop webpage with react-bootstrap. This webpage consists of a logo, main heading, form, and some links that appear after the form. To ensure that all of this content is displayed in the center of the webpage, I am ...

Deleting a folder using npm prior to the build process

Can someone help me with this issue? I have the following script: "build": "rimraf dist webpack --progress --config webpack/prod.js", However, instead of just removing the 'dist' folder, it is removing all files inside the 'webpack' fol ...

Guide on translating a date object with angular-translate

I am currently facing a challenge with localizing date objects in my Angular application. I have a list of dates displayed in my view, powered by the controller. I am using angular-translate for managing localization throughout the application, but I' ...

What are some techniques for concealing a CSS transition beneath another element in both directions?

Witness the magic in action! By clicking on the black box below, a larger black box will gracefully emerge from beneath the sidebar. While it may not be as clear in jsfiddle, rest assured that this effect is more pronounced in browsers. Thanks to some clev ...

Trading keys between arrays in JavaScript

I have a set of simple objects contained within an array: var myObject1 = [ {name: "value1", adddress: "545454545445"}, {name: "value2", adddress: "323233223"}, {name: "value3", adddress: "332 ...

Dynamic JavaScript Calculations Based on User Input in Real Time

I am in the process of creating a dynamic calculator that updates in real-time based on user input from a form. I have successfully implemented this feature using a sample div, but I am encountering difficulties when attempting to display the total inside ...