The error message "Property 'hideKeyboardAccessoryBar' does not exist on type 'Keyboard'." appeared while using the IONIC Moodle App

Having an issue in the IONIC Moodle App with a typescript error stating that property 'hideKeyboardAccessoryBar' does not exist on type 'Keyboard'.

An ionic error occurred when running CMD, displaying the following error:

[14:58:02] ionic-app-scripts 3.1.9

[14:58:02] build dev started ...

(node:8056) ExperimentalWarning: The fs.promises API is experimental

[14:58:03] clean started ...

[14:58:03] clean finished in 307 ms

[14:58:03] copy started ...

[14:58:13] copy finished in 9.26 s

[14:58:13] deeplinks started ...

[14:58:19] deeplinks finished in 5.41 s

[14:58:19] transpile started ...

[15:00:00] typescript error at line 52 in app.component.ts related to the Keyboard property 'hideKeyboardAccessoryBar'.

[15:00:00] another typescript error at line 120 in app.ts showing that the property 'close' does not exist on type 'Keyboard'.

[15:00:00] ionic-app-script task: "build"

[15:00:00] Error: Failed to transpile program

Error: Failed to transpile program

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR!

[ERROR] An error occurred while running subprocess npm.

npm run ionic:build -- --target cordova --platform android exited with exit code 1.

Re-running this command with the --verbose flag may provide more information.

An additional ionic error relating to Moodle can be found here.

typescriptionic-frameworknpmmoodlephonegap

Answer №1

If you're utilizing the updated cordova-plugin-ionic-keyboard, then you'll be using this.keyboard.hideFormAccessoryBar(true) rather than the methods hideKeyboardAccessoryBar and .hide() found in cordova-plugin-keyboard.

Check out more information here

Answer №2

I encountered a similar issue, but after commenting out certain lines of code and trying it again, it worked for me.

To resolve the issue, comment out the hideKeyboardAccessoryBar and close in your 

F:/akas/android/clidemoodle/src/app/app.component.ts
F:/akas/android/clidemoodle/src/providers/app.ts

After saving and running the code, it should hopefully work fine now.

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

Supporting Windows desktop within Cordova technology

I am currently seeking the best solution for my upcoming development project. Here are my requirements: - Supported platforms: Android, iOS, Windows Mobile, Windows desktop. - Looking for a unified code base if possible. In the past, I have experience w ...

windowsangularcordovaionic-frameworkhybrid

Looking to verify a file using ngx-file-drop in Angular 5 or higher?

I am currently implementing "ngx-file-drop" in Angular 6. <file-drop headertext="Drop files here" (onFileDrop)="dropped($event)" (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)" multiple> <span> ...

angularnpmfile-uploadangular6ng-file-upload

How can I seamlessly combine CoffeeScript and TypeScript files within a single Node.js project?

When working on a server-side node project utilizing the standard package.json structure, what is the best way to incorporate both Coffeescript and Typescript files? It's crucial that we maintain the availability of npm install, npm test, and npm sta ...

javascriptnode.jscoffeescripttypescriptpackage.json

Tackling the challenge of merging PDF files and designing a Table of Contents feature reminiscent of Acrobat in Node.js and JavaScript

I am currently implementing the following code snippet: const pdfmerger = require('pdfmerger') var pdfStream = pdfmerger(array_of_pdf_paths) var writeStream = fs.createWriteStream(final_pdf_path) pdfStream.pipe(writeStream) pdfmerger(array_of_pd ...

javascriptnode.jspdfnpm

Vanilla JavaScript error: Unable to access property

I am working on implementing a header with a logo and navigation that includes a menu toggle link for smaller viewports. My goal is to achieve this using Vanilla JS instead of jQuery. However, when I click on the menu toggle link, I encounter the followin ...

javascripthtmltypescript

Prevent Component Reloading in Angular 4 when revisiting the page

My application consists of three main components: 1) Map 2) Search 3) User Profile Upon logging in, the MAP component is loaded by default. I can navigate to other screens using the header menu link. I am looking to implement a feature where the map comp ...

angulartypescriptbing-maps

A guide on how to navigate to a customizable element in React Native

After creating a glossary, I needed a way to access the content of a specific letter by clicking on that letter from a list displayed at the top of my page. However, I encountered an issue - while I managed to implement scrolling functionality, I couldn&ap ...

reactjstypescriptreact-native

Can react-bootstrap-pagination be configured to display pagination controls at all times, regardless of the total page count being 1?

I implement the Kurounin:Pagination package in my projects using MeteorJS and ReactJS. Is there a way to configure the react-bootstrap-pagination component to display pagination controls even when the total number of pages is just 1? ...

meteorreactjspaginationnpm

Disarrayed generic parameters in TypeScript

The title of the question may not be perfect, but it's the best I could do. Imagine a scenario where there is a function that accepts a callback along with an optional array. The callback takes an index and another optional array as parameters, and t ...

typescript

What is the best way to install Bootstrap through npm?

My npm project is utilizing jquery with the following code: var $ = require('jquery'); In addition, my index html file includes a reference to bootstrap: <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="styl ...

jquerytwitter-bootstrapnpm

Utilize TypeScript in creating a Chrome extension to fetch elements by their ID

I'm currently working on a Chrome extension using Angular and Typescript, and I have encountered an issue with accessing the document element by its id from the active tab. While this works perfectly fine in JavaScript, I am facing difficulties in ach ...

angulartypescriptgoogle-chrome-extension

The child object in Typescript is characterized by its strong typing system

Looking to convert plain AngularJS code to Typescript? Take a look at this example: app.someController = function ($scope) { // var $scope.Data = null; var $scope.Data: SomeCollection = null; I need to associate Data with scope and specify it as type ...

angularjstypescript

Enhance your NodeJS projects in WebStorm by seamlessly incorporating NPM modules within the 'External Libraries' section

Is there a method to incorporate NPM NodeJS External modules into my node project so that the modules are displayed in 'External Libraries', and can be resolved by code completion and navigation? Appreciate any guidance. ...

node.jsnpmwebstorm

The function argument does not have the property 'id'

I created a function that authorizes a user, which can return either a User object or a ResponseError Here is my function: async loginUser ({ commit }, data) { try { const user = await loginUser(data) commit('setUser', user) ...

typescriptvue.jsvuejs3

Accessing arrays using bracket notation

When working with TypeScript (or JavaScript), you have the option to access object properties using either dot notation or bracket notation: object.property object['property'] Let's explore a scenario using the latter method: const user = ...

javascripttypescript

What is the process for setting up npm while using a proxy server?

I've gone through all the information on this issue, but none of the solutions seem to be effective for me. The error message I'm receiving is npm ERR! code E418 or npm ERR! network request to http://registry.npmjs.org/expo failed, reason dri ...

react-nativenpmexpo

AngularJS UI-Router in hybrid mode fails to recognize routes upon initial page load or reload

It appears that when using the @ui-router/angular-hybrid, routes registered within an ng2+ module are not being recognized during the initial load or reload. However, these same routes work fine when accessed by directly typing the URL. I have followed th ...

angularjsangulartypescriptangular-ui-routerangular-hybrid

Module error caused by Typescript path inconsistency

After creating a new model named "project" within the existing project, I encountered an error when attempting to import the class into another typescript file in VS2019. The specific error message thrown is as follows: "ts2307 cannot find module ' ...

angulartypescriptvisual-studio-2019

Transforming this JavaScript function using Template Strings into TypeScript

Is there anyone out there who can assist with the following query? I have a functional .js file that I need to integrate into a TypeScript program. import React from "react"; import styled, { css } from "styled-components"; const style = ({ theme, ...res ...

typescriptstyled-components

release a Node.js module on NPM

Being a complete beginner in creating npm packages using typescript2 and angular2, I find myself in need of creating an npm package and publishing it on our company's private repository. I've managed to generate files like d.ts and .js. But how ...

typescriptnpm