The functionality of Ionic 3 native plugins suddenly ceased to function. After attempting to add ngx at the end, the red line error disappeared. However, the plugin still

import { Market } from '@ionic-native/market/ngx';

    constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen,
        private market: Market
        ) {
        this.initializeApp();
        this.market.open('io.ionic.expensemanager2018');
      }

    this.market.open('io.ionic.expensemanager2018');

The issue I'm facing is:

DetailsPage.html:95 ERROR TypeError: Object(...) is not a function
    at Market.open (index.js:27)
    at DetailsPage.webpackJsonp.52.DetailsPage.faq (details.ts:29)
    at Object.eval [as handleEvent] (DetailsPage.html:95)
    at handleEvent (core.js:13589)
    at callWithDebugCon(core.js:15098)
    at Object.debugHandleEvent [as handleEvent] (core.js:14685)
    at dispatchEvent (core.js:10004)
    at core.js:10629
    at HTMLElement.<anonymous> (platform-browser.js:2628)
    at t.invokeTask (polyfills.js:3)

I've tried downgrading the version but it hasn't resolved the problem. Any assistance would be appreciated.

typescriptionic-framework

Answer №1

Ensure to confirm your project type in the ionic.config.json file.

If it is labeled as "ionic-angular", then proceed with installing version 4.x.x.

In this scenario

npm i -s @ionic-native/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8c5c9dac3cddce89c869a988698">[email protected]</a>

If the type is indicated as "angular", opt for installation of version 5.x.x-beta

npm i -s @ionic-native/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2cfc3d0c9c7d6e2978c928c928fc0c7d6c38c9096">[email protected]</a>

Note:

Add ngx at the end of import only if you are utilizing Angular 6

import { Market } from '@ionic-native/market/ngx';

Otherwise, omit ngx from the import in both app.module.ts and app.component.ts

import { Market } from '@ionic-native/market';

Reference:https://github.com/ionic-team/ionic/issues/15225#issuecomment-414074074

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

What could be causing the Toast message to not show up in react-native-root-toast?

Incorporated react-native-root-toast into my expo project running on expo 51. Please see the code snippet below for reference: const toastColors = { 'error': { color: '#DA5C53', iconName: <WarningIcon size="5 ...

javascripttypescriptreact-nativeexpo

Using Typescript, instances of a class can access its members from within methods without needing

Having recently dipped my toes into the world of Node and TypeScript, I was taken aback to discover that you need to explicitly specify this in order to access class members when working with classes. Take for example this code snippet: class MyClass { p ...

node.jstypescriptoop

Automatically arrange TypeScript import statements in alphabetical order in WebStorm / PhpStorm

I am using tslint with the default config tslint:recommended and I am looking to minimize the number of rules I need to customize. Some rules require that imports be alphabetized: src/core/task/TaskMockDecorator.ts[2, 1]: Imports within a group must be a ...

typescriptphpstormwebstormtslintcode-standards

What is the method for adding local images to FormData in Expo version 48 and above?

When working with Expo v47 and its corresponding React Native and TypeScript versions, FormData.append had the following typing: FormData.append(name: string, value: any): void An example of appending images using this code could be: const image = { uri ...

typescriptreact-nativeexpo

What is the correct method for packaging and using a TypeScript library built with webpack?

Recently delving into the world of TypeScript, I find myself struggling to grasp how to create a TypeScript library that can be utilized in another TypeScript module through webpack. This particular library is meant to be functional within a browser envir ...

typescriptwebpack

The debate between TypeScript default generic types and contextual typing

Contextual Typing in TypeScript is an interesting feature where the correct type is inferred from the return value when a generic type is not specified. While it usually works well, there are instances where it can be unpredictable. For example, in some c ...

typescripttypescript-generics

The index signature for strings appears to be duplicated in this TypeScript file, causing an

I am attempting to create a type with an index signature in TypeScript. Here is the code snippet: export interface LoginState { account: { [userName: string]: string; [password: string]: string; }; } However, I ...

reactjstypescript

Generating JavaScript files automatically upon initiating the npm start command

As I develop an Angular2 app with typescript, I encounter a situation where running npm start results in all .ts files being compiled into javascript files and saved in the directory. Is there a way to disable this automatic compilation? The contents of m ...

typescriptnpmangular

Tips on replacing views within ion-view and updating the title in the title bar to match the injected page through the use of Ionic and AngularJS

I am new to ionic and angular JS. I am currently working on a simple app within the ionic framework. My goal is to inject an HTML template into the ion-view tag using ngRoute. However, I am facing issues as my code is not successfully injecting the HTML te ...

htmlangularjsionic-framework

Do not display large numbers within an HTML card

I have https://i.sstatic.net/DkowD.png this card here and displaying dynamic data inside it. The number is quite large, so I would like it to appear as 0.600000+. If a user hovers over the number, a tooltip should display the full number. How can I achieve ...

htmlangulartypescript

Inconsistency with Context Values in NextJS: Production Environment Shows Undefined Values (while Development Environment Works as

A feature called "dark mode" has been successfully integrated into my Next.js application using the React Context API. While everything functions properly during development, issues related to the Context provider have surfaced in the production version ...

reactjstypescriptnext.jsreact-context

WebWorker tends to be loaded intermittently on android devices

We have integrated a web worker in our Ionic application to handle certain computations. Previously, this setup functioned properly without any issues. However, suddenly we are encountering some challenges. Despite making significant changes throughout th ...

javascriptandroidangularionic-frameworkweb-worker

Detecting incorrect serialized data entries based on data types

In the scenario where the type MyRequest specifies the requirement of the ID attribute, the function process is still capable of defining a variable of type MyRequest even in the absence of the ID attribute: export type MyRequest = { ID: string, ...

javascriptnode.jstypescript

Displaying sorted objects from Angular serviceIn Angular 8, let's retrieve an object

In my Angular8 application, I am running a query that fetches a data object. My goal is to sort this data object based on the order value and then display each product item on the browser. For example, here is an example of how the output should look like ...

javascriptangulartypescriptdictionaryobservable

Looking for a TypeScript annotation that allows accessing an object property using a variable

When working with plain JavaScript, we have the ability to access an object's property value using a variable. For example, this is permitted: let obj = { a: 100, b: 'Need help with TypeScript', c: new Date() }; let prop = 'b'; c ...

typescript

What is the best way to position the dx-button next to the dxo-export?

Incorporating the export-button/dxo-export into the dx-data-grid component poses a challenge. I aim to have two dx-buttons alongside the dxo-export button, all aligned to the right and on the same line. https://i.sstatic.net/kxy4H.png Upon examining my co ...

angulartypescriptdevextremedevextreme-angulardx-data-grid

Encountering Error 203 while trying to establish a connection between Angular and Django Rest Api

I'm currently working on a project that involves creating a contacts system, but I've been encountering errors when trying to list them. Interestingly, I can successfully perform CRUD operations using Postman with the API. One of the messages I ...

angulartypescriptdjango-rest-framework

Error: Unexpected input detected in `ts.resolveTypeReferenceDirective`. This issue may lead to a debug failure

I'm encountering the error below: { "name": "Angular", "version": "1.0.0", ... } If anyone has insights on what steps to take next or the potential cause of the problem, your input would be greatly a ...

node.jsangulartypescriptwebpack

The TSC directive requiring 372 seconds for execution

I recently discovered that my TypeScript Firebase repository, used for cloud functions and consisting of only 6 files in the src directory, was taking an unusually long time to compile when running the tsc command. To investigate further, I executed it wit ...

node.jstypescriptfirebasetsc

Utilizing React Higher Order Components with TypeScript: can be initialized with a varied subtype of restriction

I am currently working on creating a Higher Order Component (HOC) that wraps a component with a required property called value, while excluding its own property called name. import React, { ComponentType } from 'react'; interface IPassThro ...

reactjstypescripttypescript-generics