Error: The cordovaLocalNotification plugin is attempting to read a property 'plugins' that is undefined, resulting in a TypeError

I am currently working on a hybrid application using the Ionic platform. I am trying to integrate Cordova local notification features, but I keep getting an error message saying "cannot read property 'plugins' of undefined." Below is my code. Can anyone offer assistance in resolving this issue?

index.html

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">
  <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/ngCordova/dist/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" ng-controller="SampleController">

  <ion-pane>
    <ion-header-bar class="bar-stable">
      <h1 class="title">Local Notification Sample</h1>
    </ion-header-bar>
    <ion-content>

        <button class="button button-block button-positive" ng-click="scheduleInstantNotification()">
          Instant 
        </button>

    </ion-content>
  </ion-pane>
</body>

</html>

app.js

angular.module('starter', ['ionic', 'ngCordova'])
  .run(function ($ionicPlatform, $rootScope) {
    $ionicPlatform.ready(function () {
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }

        $rootScope.$on('$cordovaLocalNotification:schedule',
            function (event, notification, state) {
                console.log("SCHEDULE");
                console.log('event', event);
                console.log('notification', notification);
                console.log('state', state);
            });

        $rootScope.$on('$cordovaLocalNotification:trigger',
            function (event, notification, state) {
                console.log("TRIGGER");
                console.log('event', event);
                console.log('notification', notification);
                console.log('state', state);
            });

        $rootScope.$on('$cordovaLocalNotification:update',
            function (event, notification, state) {
                console.log('UPDATE');
                console.log('event', event);
                console.log('notification', notification);
                console.log('state', state);
            });

        $rootScope.$on('$cordovaLocalNotification:cancel',
            function (event, notification, state) {
                console.log('CANCEL');
                console.log('event', event);
                console.log('notification', notification);
                console.log('state', state);
            });
    });
  })
  .controller('SampleController',
    function ($scope, $cordovaLocalNotification, $ionicPlatform) {
        $ionicPlatform.ready(function () {

            $scope.scheduleInstantNotification = function () {
                $cordovaLocalNotification.schedule({
                    id: 1,
                    text: 'Instant Notification',
                    title: 'Instant'
                }).then(function () {
                    alert("Instant Notification set");
                });;
            };
            };
        });
    });

Answer №1

It is recommended to utilize window.cordova.plugins rather than cordova.plugins

if (window.cordova && window.cordova.plugins.Keyboard) {
      //cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      window.cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}

Answer №2

To incorporate a plugin, utilize the command cordova plugin add ionic-plugin-keyboard

Place the aforementioned code inside the ondeviceready function to ensure proper functionality.

Validate the implementation by inspecting using developer tools. Debug your mobile application and confirm the existence of cordova.plugins.Keyboard

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

Attempting to create an auto-suggestion tool that can process and accept multiple input values, filtering out only those that begin with a designated character

I've been working on implementing an auto-suggestion feature that displays suggestions with partial matches or values within the input box. The goal is for it to only provide suggestions that begin with a specific character, like the "@" symbol. Fo ...

React - Obtain User Login Details and Verify

I am working on a React project that includes a Login Form. The code has been organized into small components for reusability, but I am unsure of how to retrieve and validate user credentials (username and password). Is there a method available to validate ...

Which Client-Side JavaScript Frameworks Pair Seamlessly With Node.js, Express.js, and socket.io.js?

Currently, I am in the process of developing a web application utilizing Node.js, Express.js, and socket.io.js on the server side. Are there any front-end frameworks (such as Agility, Angular, Backbone, Closure, Dojo, Ember, GWT, jQuery, Knockback, Knocko ...

Viewing a document generated using the Google Drive API using the Google Drive Viewer

Using the Google Drive API, I am able to generate a document and receive some URLs: alternateLink : https://docs.google.com/document/d/xxxsome_idxxxxx/edit?usp=drivesdk embedLink https://docs.goo ...

Hide and reveal images on hover by using multiple images or links on a single webpage

Despite my efforts, I haven't been able to find exactly what I'm looking for. My current setup involves an image/content slider powered by Awkward Showcase. Within each slide, I want to incorporate a mouse-in/mouse-out effect that switches and hi ...

Encountered an issue while attempting to make a GET request using the fetch API

Currently, I am attempting to retrieve some data from the server using react.js and the fetch API. However, I keep encountering this error: SyntaxError: Unexpected token < in JSON at position 0. This is the code snippet I am using to fetch the data: ...

Surprising non-synchronous operation within the computed property "vue/no-async-in-computed-properties" in Vue3

I am currently working on a Vue3 project and encountering an error when running it. Below is the complete code snippet that I am using. Can anyone assist me in resolving this issue? Thank you in advance. <script> import axios from 'axios'; ...

I'm trying to display hidden forms on a webpage when a button is clicked using the DojoToolkit, but I'm having trouble figuring out what's going wrong with my code

Currently, I am trying to grasp the concepts of Dojotoolkit and my objective is to display a form when a button is clicked. Upon reviewing other examples, my code seems correct to me; however, there appears to be something crucial that I am overlooking but ...

Angular: Intercept Drag and Drop Actions

I am utilizing angular-ui to create a sortable list using "drag and drop" functionality, and it is functioning perfectly. Here is an example of how it works: index.html <ul ui-sortable ng-model="list"> <li ng-repeat="item in list" class="it ...

How to apply class binding within a v-for loop in Vue.js

When using Vuejs3, I am currently iterating through an array of objects: <div v-for="ligne in lignes" :key="ligne.id" :class="{ 'border-b-2':isSelected }" :id="`ligne_${ligne.id}`" > ...

javascript best practice for processing form data with arrays

As a newcomer to javascript, I've been exploring more efficient ways to handle certain situations. For example, would it be possible to utilize an array for this particular scenario? Here's the challenge: I have an HTML form with 6 fields that a ...

Displaying a dynamic splash screen during the resource-loading process on an Android application

I would like to implement an animated image (currently using a set of PNGs) as a splash screen while my resources are loading. I have successfully displayed the splash screen using this method. However, the issue I am facing is that the splash screen appe ...

Utilize Apollo to retrieve a variety of queries at once

Currently, I'm utilizing nextJS for my frontend development along with Apollo and GraphQL. For fetching queries, I am using the getStaticProps() function. To enhance modularity and maintainability, I have segmented my queries into multiple parts. The ...

Bird's-eye view captured by a high-angle camera

As I rotate a sphere around the z-axis, I'm looking for a way to prevent the camera from causing motion sickness by creating a stable elevated view of the sphere. How can I achieve this without the camera's movements being so jarring? If you&apo ...

Error: Unable to locate module: 'material-ui/styles/colors'

I encountered an issue with the code below, as it failed to compile: import React from 'react'; import { AppBar, Toolbar } from 'material-ui'; import { Typography } from 'material-ui'; import { MuiThemeProvider, createMuiThem ...

"Step-by-step guide on using JavaScript to print a PDF file stored locally

As an illustration, I have a local PDF file with 6 pages. When using the window.print() function, only one page is displayed in print preview regardless of what is shown in the browser. Instead of just one page, all pages should be visible in print previ ...

What is the best way to enable the noWrap feature for a Typography component that is within an Alert or AlertTitle component?

My goal is to have a Typography component truncate overflowing text with an ellipsis. However, I am facing an issue where this doesn't work when the Typography component is nested inside an Alert component. Below is a snippet of the code in question: ...

Struggling to configure an input field using ExtJS

I am trying to use an onChange event to update an input field with the selected option. Below is my code: HTML: <select id="builds" onchange="setBuild()"> <option value="select">Select</option> ... </select> <input ty ...

Is it possible to integrate a collection of libraries along with external dependencies into Vite?

Currently, I am in the process of packaging a library for npm that uses type: "module". To accomplish this, I have configured vite's library mode with the following settings: export default defineConfig({ css: { postcss: { plugin ...

I am just starting to explore firebase and I'm having trouble organizing my data. I've attempted to use the query function and orderBy

After experimenting with query and orderBy() methods, I'm still struggling to properly integrate it into my code. Here's what I have so far: Methods: async saveMessage(){ try { const docRef = await addDoc(collection(db, "chat"), ...