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

Using Typescript to extract/calculate types with limitations without the need to explicitly extend or broaden them

I have a function called build that constructs a User object using the provided parameters. I want to define the function in such a way that it recognizes which parameters are being passed and incorporates them into the return value. Initially, I thought ...

typescripttypescript-generics

What is the best way to implement a response.write function within the request module?

I have a project where I am setting up an HTTP server and sending a request to the Yahoo Finance website to retrieve some data. My goal is to display this data on the browser, but I'm facing an issue with the response.write function not working inside ...

javascriptnode.jshttpnpm

Is there a way to prevent the installation of unnecessary node modules that are not included in my package.json file?

"dependencies": { "jquery": "^2.2.3", "normalize.css": "^4.1.1" }, "devDependencies": { "browser-sync": "^2.12.3" } } My package.json file contains specific dependencies, but when I delete the node_modules folder and execute npm install, it unexpected ...

node.jsnpmgulp

What is the importance of adding the ".js" extension when importing a custom module in Typescript?

This is a basic test involving async/await, where I have created a module with a simple class to handle delays mymodule.ts: export class foo { public async delay(t: number) { console.log("returning promise"); ...

typescriptmodule

Setting up OpenID configuration in angular-oauth2-oidc to bypass authentication for certain addresses

In my Angular project, I implemented OpenID authentication using the angular-oauth2-oidc project. However, I need to disable authentication for certain routes. To achieve this, I start the code flow in the main component and bootstrap it in the main modu ...

angulartypescriptopenidangular-oauth2-oidc

The battle of Any, Generic Type, and Unknown in Typescript

Is it advisable to replace the type any with Generic Types? I understand that using type any is generally discouraged as it removes type checking in TypeScript, making it unsafe. So what is a better alternative - using unknown or generic types? For examp ...

typescripttypescript-typingstypescript-genericsgeneric-type-argument

Guide to importing a markdown document into Next.js

Trying to showcase pure markdown on my NextJS Typescript page has been a challenge. I attempted the following: import React, { useState, useEffect } from "react"; import markdown from "./assets/1.md"; const Post1 = () => { return ...

reactjstypescriptnext.js

The function Server.listeners is not recognized by the system

Currently, I am following a tutorial on websockets to understand how to incorporate Socket.IO into my Angular project. Despite meticulously adhering to the instructions provided, I encountered an error when attempting to run my websockets server project: ...

javascriptnpmwebsocket

I'm encountering an issue where the npm install process is getting stuck while attempting to extract the xxxx package

When running the sudo npm install command on my local machine, everything works fine. However, once I pulled the code into an EC2 Ubuntu machine, the npm install process gets stuck at a certain point. The output shows "sill doParallel extract 1103" and I ...

node.jsubuntuangularamazon-ec2npm

There is an issue with creating the React app using the Node npm create-react-app command. The file named "react-app"

insert image description here Can you please review my screenshot? ...

node.jsreactjsnpm

utilize a modal button in Angular to showcase images

I am working on a project where I want to display images upon clicking a button. How can I set up the openModal() method to achieve this functionality? The images will be fetched from the assets directory and will change depending on the choice made (B1, ...

htmlangulartypescriptmodal-dialogassets

Grunt is throwing an error message of "Cannot GET/", and unfortunately ModRewrite is not functioning properly

I've recently started using Grunt (just began last Friday). Whenever I run Grunt Serve, it displays a page with the message "cannot GET/" on it. I tried implementing the ModRewrite fix but the error persists. Any assistance would be highly appreciat ...

javascriptnpmgruntjsconnect-modrewrite

Error: Unable to load the parser '@typescript-eslint/parser' as specified in the configuration file '.eslintrc.json' for eslint-config-next/core-web-vitals

When starting a new Next.js application with the specific configuration below: ✔ What name do you want to give your project? … app ✔ Do you want to use TypeScript? … No / [Yes] ✔ Do you want to use ESLint? … No / [Yes] ✔ Do you want to use T ...

typescriptnext.jseslintprettiereslintrc

Error! Unexpected closure occurred while creating an Angular CLI project with npm

After cloning an Angular (4+) CLI project onto a new machine and running npm install, I encountered an error that reads as follows. This project works perfectly fine on other computers: npm ERR! premature close npm ERR! A complete log of this run can be ...

angularnpmangular-cli

What is the best way to first identify and listen for changes in a form

In Angular, there are reactive forms that allow you to track changes in both the complete form and specific fields: this.filterForm.valueChanges.subscribe(() => { }); this.filterForm.controls["name"].valueChanges.subscribe(selectedValue => { }); ...

angulartypescript

Is there a simpler and more refined approach for handling Observables within RxJS pipelines?

Picture this: I have an observable that gives me chocolate cookies, but I only want to eat the ones without white chocolate. Since I am blind, I need to send them to a service to determine if they are white or not. However, I don't receive the answer ...

javascriptangulartypescriptrxjs

Adding a unique font to the themeprovider within styled components: A step-by-step guide

In the process of developing a React application using material-ui styled-components along with TypeScript. The task at hand is to incorporate a custom font into my styled components, but I'm facing challenges in making it functional. My initial ste ...

reactjstypescriptmaterial-uistyled-componentsjss

Ensure that a variable adheres to the standards of a proper HTML template

I'm struggling with a problem in my Angular application. I need to ensure that a TypeScript variable is a valid HTML template to compile successfully, like this: let v = '<div>bla…</div>' However, if the variable contains inco ...

angulartypescriptangular-builder

Are the missing attributes the type of properties that are absent?

I have a pair of interfaces: meal-component.ts: export interface MealComponent { componentId: string; componentQuantity: number; } meal.ts: import { MealComponent } from 'src/app/interfaces/meal-component'; export interface Meal { ...

angulartypescript

Elevate the Appearance of Material UI Elements with custom CSS Sty

I am currently facing an issue while trying to customize the styling of a Material UI component using CSS. Here is the code snippet: <IconButton className="my-class"> <Close /> </IconButton> CSS: .my-class { float: right ...

cssreactjstypescriptmaterial-ui