Cannot find name 'cordova'

Ionic Framework ionic-v3
1

Ok, i’m trying to use a ionic-native plugin, the file plugin. There aren’t a lot a docs/examples on the internet (at least i couldn’t find them). The thing is that whenever i try to use a cordova object (like cordova.file.dataDirectory), the ide throws “[ts] Cannot find name 'cordova'”.

I already installed ionic-native and cordova-plugin-file. I read something about typings… i’m not sure if i have to install that too because it’s a ionic-native plugin…

import {App, Platform} from 'ionic-angular';
import {File} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import {DataService} from './data.service';

@App({
    template: '<ion-nav [root]="rootPage"></ion-nav>',
    providers: [DataService],
    config: {}
})
export class MyApp {
    rootPage : any = TabsPage;

    constructor(platform: Platform, dataService : DataService) {
        platform.ready().then(() => {
            StatusBar.styleDefault();
            File.listDir(cordova.file.dataDirectory, '').then((data) => document.write(data), (data)=> document.write('Error: '+JSON.stringify(data)));
        });
    }
}
2

I am facing the same issue in my atom IDE. Have you find any solution? :slight_smile:

3

Finally, I found the solution. I copied the cordova.d.ts file and plugins folder from here - https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/cordova

And pasted this folder and file in my own project/typings directory. Now it works fine for me.

cheers :sunglasses:

1 Like
4

I guess that you still have to install typings and the Cordova typings package using these commands:

npm install -g typings
typings install dt~cordova --save --global
1 Like
5

This work for me ! Thks but now I get this error : Error TS2339: Property ‘InAppBrowser’ does not exist on type ‘Cordova’.

Any ideas ? (I can create a new topic if needed)

EDIT: I finally found the solution =>

import { InAppBrowser } from ‘ionic-native’;

@Component({
providers: [InAppBrowser]
})

InAppBrowser.open(…);

instead of cordova.InAppBrowser.open(…) as mentionned in the doc

thanks anyway guys :slight_smile:

2 Likes
6

well all you have to do is just including the line, “declare var cordova:any;” right after the line “import {File} from ‘ionic-native’;” and for me in that case problem solved

1 Like
7

I don’t see an ‘open’ method of InAppBrowser…?

I have tried both
import { InAppBrowser } from '@ionic-native/in-app-browser';
and
import { InAppBrowser } from '@ionic-native';

then adding a
browser: InAppBrowser
to the constructor

and a simple function like so:
openBrowser() { let url:string ='http://ionicframework.com/docs/v2/native/inappbrowser/'; let options ='location=no,toolbar=yes,hidden=no'; this.browser = new InAppBrowser(url,'_blank', options); this.browser.show(); }
… and I get the following error:

Error in ./HomePage class HomePage - inline template:33:9 caused by: No provider for InAppBrowser!

The docs give mixed information on this :frowning:

8

Which of those is appropriate depends on whether you are using ionic-native 2 or 3, respectively. Do not construct the InAppBrowser explicitly. Use DI as is documented in the docs page you are using in your sample.

9

Thanks for your input @rapropos - much appreciated. I confess I had no idea there was an ionic-native 3…

So Ive tried a number of ways, including the above and using a direct implementation of the code from the docs page, but no luck so far.

When I utilise:
import { InAppBrowser } from '@ionic-native/in-app-browser';

and then implement a:
private iab: InAppBrowser
in the constructor, it errors with
Cannot find name ‘InAppBrowser’. Im importing the InAppBrowser on the page upon which I intend to use it. Ive also tried importing in the app.module.ts file. Presumably there is somewhere else I should be looking?

So unfortunately I dont get as far as testing whether this.iab.create(‘https://ionic.io’); works, though hopefully it will then if that is indeed the route you are suggesting?

many thanks in advance

1 Like
10

I think you have been caught in the midst of a major version release. v3.1.0 was released 8 hours ago, and the docs now reflect its syntax. So either upgrade to that version and stick with the import you have now (probably recommended) or if you want to stay with 2.9, change to importing it from “ionic-native” (note no leading @).

11

Thanks @rapropos, that figures! I installed the plugin a few hours before it was updated.

So I just removed the plugin using
ionic plugin rm cordova-plugin-inappbrowser
and then reinstalled with:
plugin --save add cordova-plugin-inappbrowser
Fetching plugin "cordova-plugin-inappbrowser@~1.7.0" via npm
Installing "cordova-plugin-inappbrowser" for android
Installing "cordova-plugin-inappbrowser" for ios
Saved plugin info for "cordova-plugin-inappbrowser" to config.xml
…but, no difference - the reference to iap: InAppBrowser in the constructor still causes an error (Cannot find name ‘InAppBrowser’)

Is there a better way to update the plugin maybe? Could there be cache at work here maybe.
I must be missing something really dumb here :frowning:

12

No, it’s not the plugin itself, it’s ionic-native. See here.

13

Thank you so much @rapropos that was the bit I was missing!! No error now :smile:

14

THANKS! Solved for me ionic 2.2.2

15

Why do you feel the need to resort to such subversion?

16

var ref = cordova.InAppBrowser.open(this.url, ‘_self’, ‘location=yes’);

after following steps i have written

var ref = InAppBrowser.open(this.url, ‘_self’, ‘location=yes’);

still its giving foloowing error

[ts] Property ‘open’ does not exist on type ‘typeof InAppBrowser’.

17

The IAB function open() is actually create().

If you have the Provider error. Did you add the IAB module to your app.module.ts-file? Add it as Providers

18

hi did u integrated the payment gateway ionic 2 ?

19

i need to use create inplace open ?

20

See this.