javascript - Using In App Browser cordova plugin with typescript - Stack Overflow

admin管理员组

文章数量:1430235

I'm trying to build cordova app with typescript + react.

So i need to open the base64 image or pdf in external app (Gallery or PDF Reader, user can manually choose the option) and came across this cordova plugin "InAppBrowser".

The problem is, the whole reference and docs are made for JavaScript and when i'm trying to use it in TS it leads to error

var ref = cordova.InAppBrowser.open(base64path, '_blank', 'location=yes');

Property 'InAppBrowser' does not exist on type 'Cordova'.

I have installed typings for "cordova" and "cordova-in-app-browser-plugin" (index.d.ts files), but it is not fixing the problem. Have anybody knows the solution? Thanks.

I'm trying to build cordova app with typescript + react.

So i need to open the base64 image or pdf in external app (Gallery or PDF Reader, user can manually choose the option) and came across this cordova plugin "InAppBrowser".

The problem is, the whole reference and docs are made for JavaScript and when i'm trying to use it in TS it leads to error

var ref = cordova.InAppBrowser.open(base64path, '_blank', 'location=yes');

Property 'InAppBrowser' does not exist on type 'Cordova'.

I have installed typings for "cordova" and "cordova-in-app-browser-plugin" (index.d.ts files), but it is not fixing the problem. Have anybody knows the solution? Thanks.

• javascript
• android
• cordova
• reactjs
• typescript

Share Improve this question Follow asked Feb 7, 2017 at 16:50 Quimmo Quimmo 6511 silver badge55 bronze badges 4

• I've been looking at this, and paring it with other files. I think there may be some "buggy" stuff in the typescript InAppBrowser file.... Basically, I added the following in the "InAppBrowser.d.ts" file (typings folder): interface Cordova { InAppBrowser:InAppBrowser } And then called it like: var ref = cordova.InAppBrowser.open('google.', '_blank', 'location=yes'); Can you tell me if this works for you? – Aaron Commented Feb 7, 2017 at 18:36
• @Aaron yeah, thanks! Works like a charm. –  Quimmo Commented Feb 8, 2017 at 11:00
• Glad it worked @Quimmo. I turned it into an answer, if you don't mind :) – Aaron Commented Feb 8, 2017 at 12:30
• @Aaron No, i don't mind, this is right answer.) I guess this interface should be added to typings file via pull request directly to repo. This can save hours. –  Quimmo Commented Feb 9, 2017 at 9:39

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

It appears that for some reason, the InAppBrowser typings file was not "turned on" when installed. I was able to reproduce the issue locally with a new cordova project -> install InAppBrowser through config.xml GUI "Add," install typings through NPM.

I am not sure if this would reproduce if typings was installed first, and then the cordova plugin was added or not - I imagine it might, but either way, the solution is that the InAppBrowser interface is never added to cordova. It is a simple solution though.

Navigate to the typings folder, InAppBrowser.d.ts, and add:

interface Cordova{
    InAppBrowser: InAppBrowser
}

Then, call as in your original post (I used google.):

var ref = cordova.InAppBrowser.open('http://www.google.','_blank','location=yes')

I've submitted a corrected typings file to DefinitelyTyped for cordova-plugin-inappbrowser. Starting with version 1.7.0, this bug is fixed.

As an addition to answer above, I had a similar issue in a multi-platform angular 5 app that piled to the www folder of the cordova project. Typescript would not resolve window.cordova.InAppBrowser (even after adding cordova-plugin-inappbrowser as a dev dependency.)

In my case, I needed to add the "interface Cordova{..." definition to the typings.d.ts file in the root folder of my main project.

Hopes this helps others as much as the post above helped me :)

In my case, all I had to do was add the following line to the beginning of the file:

declare var cordova: any;

本文标签： javascriptUsing In App Browser cordova plugin with typescriptStack Overflow