Oops! There seems to be an issue with a service provider. The provider $cordovaSmsProvider is unknown, causing an error in the smsController

I have been attempting to send SMS using the cordova-sms-plugin with Ionic, but I keep encountering an error. Despite trying all suggested solutions on this platform, the issue remains unresolved.

index.html

<!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">
    <!-- 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="lib/ng-cordova.min.js"></script>
    <script src="cordova.js"></script>

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

  </head>
  <body ng-app="starter">
  <ion-pane ng-controller="smsController">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Ionic Blank Starter</h1>
    </ion-header-bar>

    <ion-content>
      <ion-list>
        <label class="item item-input">
          <span class="input-label" style="padding-top: 50px" >Number</span>
          <input type="number" ng-model="sms.number">
        </label>

        <label class="item item-input">
          <span class="input-label">Message</span>
          <input type="text" ng-model="sms.message">
        </label>

        <button class="button button-full button-positive" ng-click="sendSms()">
          Send
        </button>
      </ion-list>
    </ion-content>
  </ion-pane>
    <!--<ion-pane>-->
      <!--<ion-header-bar class="bar-stable">-->
        <!--<h1 class="title">Ionic Blank Starter</h1>-->
      <!--</ion-header-bar>-->
      <!--<ion-content>-->
      <!--</ion-content>-->
    <!--</ion-pane>-->
  </body>
</html>

aap.js

.controller('smsController',["$scope", "$cordovaSms",function($scope,$cordovaSms){
    $scope.sms={};

    var options = {
        replaceLineBreaks: false, // true to replace \n by a new line, false by default
        android: {
            intent: 'INTENT'  // send SMS with the default SMS app
            //intent: ''        // send SMS without open any other app
        }
    }

        $scope.sendSms=function(){
        console.log($scope.sms.number);
        console.log($scope.sms.message);

        $cordovaSms
            .send($scope.sms.number, $scope.sms.message, options)
            .then(function() {
                // Success! SMS was sent
                console.log('Success');
            }, function(error) {
                // An error occurred
                console.log(error);
            });//then
    }//sendSms

}]);

This is my module

var app = angular.module('starter', ['ionic','ngCordova'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

Could someone kindly provide insight on how to resolve this error? Thank you in advance.

Answer №1

It appears that your code is in good shape. The primary cause of the

Error: [$injector:unpr] Unknown provider:
error may be one of the following:

  1. You may not have properly loaded the ngCordova module as a dependency, although it seems like you have already done so.

  2. The script file lib/ng-cordova.min.js could potentially not be located in the correct path or might not be downloading correctly.

Make sure to address these two potential issues in your console to ensure that your code functions correctly.

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

Adjust the contents of a DIV depending on which Toggle button is selected

When a user clicks on either "Twin Bed" or "King Bed", the content inside the "demand-message" should change to either "high demand" or "Only ??? rooms left". The ID will remain the same for both buttons due to existing logic. However, the message display ...

What's the reason for fadeIn() not functioning properly?

Here's the HTML code I'm working with: <!DOCTYPE html> <html> <head> <title>Furry Friends Campaign</title> <link rel="stylesheet" type="text/css" href="styles/my_style.css"> </head ...

Can you provide instructions on how to configure the npm settings to use the current directory in a pre

I'm currently working on setting the installation directory from where the user is installing to an npm config variable. This will help me reference it in my installation script. Can anyone advise if there is a command line solution for this or will ...

Retrieving numerical values from the Odometer syntax within Cypress

Currently, I am attempting to retrieve the balance on a webpage using Cypress. The challenge is that the balance on the webpage is displayed with an Odometer effect, which animates the numbers by increasing and decreasing them. This ReactJS component divid ...

Using setTime in JavaScript allows for customizing and adjusting the

I'm having trouble getting this code to display the time. I thought it would work, but it's not showing the time. Can someone please help me figure out what's going wrong? function startTime() { var currentTime = new Date(); ...

Mastering the art of MUI V4: Implementing conditional row coloring

I've encountered an issue with my basic Material UI v4 datagrid. I'm attempting to change the color of any row that has an age of 16 to grey using color: 'grey'. However, I'm finding it challenging to implement this. The documentat ...

Optimizing Chrome's Precious Load Time

Encountering issues with Chrome browser auto-filling passwords, usernames, etc. Creating a problem where input field validation for emptiness is not possible in Chrome while it functions correctly in other browsers. $(document).ready(function() { ...

Is it possible to dynamically assign a value to a property?

Check out the code snippet below: let data.roles = "Admin:Xxxx:Data"; for (let role of data.roles.split(':')) { user.data.role[`is${role}`] = true; } Is there a way to optimize this code to dynamically create role propertie ...

Is there a way to transform a hover dropdown menu into a sidebar dropdown menu that can be clicked on mobile devices?

Currently working on enhancing the navigation menu of my website, and I have encountered a challenge with a dropdown sub-menu when viewed on mobile devices. In reference to w3Schools, I successfully implemented a hover-based sub-menu for desktop users. Ho ...

Navigating the file paths for Vue.js assets while utilizing the v-for directive

Recently, I started working with Vue.js and found it simple enough to access the assets folder for static images like my logo: <img src="../assets/logo.png"> However, when using v-for to populate a list with sample data, the image paths se ...

Check to see if a value is present in JavaScript and proceed with submitting the form

I have a situation where I am trying to capture the browser location and post it to another page. The problem I'm facing is that JavaScript takes some time to retrieve the browser location, causing the form to be submitted before the location is obtai ...

Embed a subcomponent within another component triggered by an onClick event in ReactJS

Watch this quick demo to see my project in action. So, here's the deal - I have a menu with different options, and when "Tickers" is selected, I want it to display the Tabs component. However, if any other menu option is chosen, I don't want the ...

Failure to specify the variable type can lead to the creation of automatic global variables

Recently, I stumbled upon this http://www.w3schools.com/js/js_scope.asp page which introduced me to the concept of "Automatic Global variables". Here is an example of how it works: // You can use carName variable here function myFunction() { carName ...

Using Angular's factory method in combination with the $http service

I am in the process of creating a factory that retrieves data from a JSON feed and returns the results. Below is the factory using $http nearestLocationApp.factory("allTheLocationsFactory", function($http){ var locations = "Not sure why it's not ...

JavaScript content in the add-on panel in Firefox using Ajax

Currently, I am utilizing the Firefox Add-on SDK. Within the toolbar, there is a button that, when clicked, displays the panel HTML file. Now, my goal is to incorporate an ajax function into the On Click Event of the button within the panel HTML file. ...

angularslideables retro animation

I'm currently using the AngularSlideables library to toggle a modal within my Ionic project. You can check out a functional example in this fiddle: http://jsfiddle.net/3sVz8/19/ However, I am facing an issue where the initial height is set to 100% i ...

Encountered an abrupt termination of JSON input while implementing Promise.all() alongside the fetch method's put operation

Encountered an issue with JavaScript while attempting to retrieve mail content from an API and update its read status simultaneously. The error message displayed in the console is: SyntaxError: Unexpected end of JSON input at inbox.js:98 The error pro ...

Acquiring the chosen text from a dropdown menu with angularjs

In my TypeScript controller, I have a public variable declared as follows: public selectedTopicValue; To populate my dropdown box, I successfully used the code below: <div class="selectTopic"> <select id="cTopic" name="cTopic ...

Just diving into React and learning how to retrieve data using axios

I have encountered an issue where I can see my data within the async function, but when I try to pass it outside, all I get is the promise object. My question consists of two parts: first, how can I successfully pass this data outside of the async functio ...

Verifying the Latest Version of a React PWA: A Simple Guide

I am looking to notify my user when there is an available update. To do this, I need to find out if they are already using the latest version. Currently, I am storing a value in localStorage called "updateAvailable" as soon as the serviceWorker detects a ...