CODEWITHSUNDEEP
cordovaionic-frameworkionic2ionic3cordova-plugins
user10081175
user10081175

Reputation:

Property 'cordova' does not exist on type 'Window'. : ionic

In my code, I'm getting the error as Property 'cordova' does not exist on type 'Window'. This is where I'm getting the error var browserRef = window.cordova.InAppBrowser.open()

I've also installed the typings but still I'm getting this error. How can I resolve this?

Upvotes: 13

Views: 15563

Answers (5)

Domske
Domske

Reputation: 5656

Instead of using the any type (which is never a good idea), try configuring this type in tsconfig.json. Or try to install @types/cordova. Or extend the window object with the correct types. In a well-coded TypeScript project, you should never use the any type. At most, use unknown if there is no other option. Btw. in an Ionic project, you should use the Ionic native wrapper awesome-cordova-plugins (read more). So you don't need to access cordova directly.

{
  "compilerOptions": {
    "types": ["cordova"]
  },
}

Upvotes: 3

sebaferreras
sebaferreras

Reputation: 44659

That's just Typescript complaining because cordova is not part of the window object definition. There're several ways to avoid that error:

One way is to declare a window property of type any, like this:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

declare let window: any; // <--- Declare it like this

@Component({
  selector: 'page-demo',
  templateUrl: 'demo.html'
})
export class DemoPage {

  constructor(public navCtrl: NavController, ...) { }

  public yourMethod(): void {
    var browserRef = window.cordova.InAppBrowser.open(); // <--- and use it like this
  }

}

Another way would be to cast the window object to be of type any in the same statement where you want to use it:

var browserRef = (<any>window).cordova.InAppBrowser.open();
// or
var browserRef = (window as any).cordova.InAppBrowser.open();

If you don't want to use any you could also define the type of the window object based on the method/s you want to call:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

declare let window: {
  cordova: {
    InAppBrowser: {
      open: () => {};
    }
  }
}

@Component({
  selector: 'page-demo',
  templateUrl: 'demo.html'
})
export class DemoPage {

  constructor(public navCtrl: NavController, ...) { }

  public yourMethod(): void {
    var browserRef = window.cordova.InAppBrowser.open();
  }

}

Upvotes: 31

muttonUp
muttonUp

Reputation: 6717

In typescript 4, tslint doesn't like the <any> cast anymore.

It seems to now prefer this.

 var browserRef = (window as any).cordova.InAppBrowser.open();

Upvotes: 0

Rutger van Baren
Rutger van Baren

Reputation: 7998

Another solution would be to change

window.cordova

to

window['cordova']

Upvotes: 2

Grant
Grant

Reputation: 6329

Cordova executes only on devices, not in browser. The way to avoid errors when viewing your build in a browser is to wrap Cordova commands in a platform if statement. In example:

import { Platform } from 'ionic-angular';
import { InAppBrowser } from '@ionic-native/in-app-browser';

constructor( private platform: Platform, private iab: InAppBrowser ) {
    this.platform.ready().then(function () {
        if (platform.is('cordova')) {
            // your code, eg:
            this.iab.create('http://google.com/', '_blank');
        }
    });
}

Upvotes: 2

Related Questions