CODEWITHSUNDEEP
angularcordovatypescriptcordova-pluginsngcordova
Bhushan Mithabavkar
Bhushan Mithabavkar

Reputation: 23

how to use cordova plugin in angular 4 hybrid application

I am new in this structure. I am added camera plugin into application and build the application. It throws below error.

ERROR in D:/../CordovaApp/src/app/menu-bar/menu-bar.component.ts (20,15): Property 'camera' does not exist on type 'N avigator'.

ERROR in D:/../CordovaApp/src/app/menu-bar/menu-bar.component.ts (23,16): Cannot find name 'Camera'.

Can anyone help me to get rid out of this issue.

/** updated part **/

After adding two variable into component. Application build successfully but when I debug application I didn't get plugins property into navigator. Please refer below attached snap shot.

click on this link to open snap shot

Upvotes: 1

Views: 4997

Answers (1)

Somnath Sinha
Somnath Sinha

Reputation: 672

Typescript is a typed language. So, whenever you use any javascript based library/plugin, you have to ensure the corresponding type is available.

Here, you have used navigator, which is actually known to JavaScript or Cordova, but not known to Typescript which causes this error.

There are two ways to solve this.

  1. Install corresponding type definition. (http://definitelytyped.org/)
  2. Declaring navigator as any type.
@Component({
  selector: 'app',
  template: `<button type="button" (touchend)="onCamera($event)">Camera</button>`
})
export class AppComponent {
  public onCamera(event) {
    const cameraOptions = {
      destinationType: (<any>Camera).DestinationType.FILE_URI
    };
    (<any>navigator).camera.getPicture(cameraSuccess, cameraError, cameraOptions);
  }
}

or

declare var navigator: any;
declare var Camera: any;

@Component({
  selector: 'app',
  template: `<button type="button" (touchend)="onCamera($event)">Camera</button>`
})
export class AppComponent {
  public onCamera(event) {
    const cameraOptions = {
      destinationType: Camera.DestinationType.FILE_URI
    };
    navigator.camera.getPicture(cameraSuccess, cameraError, cameraOptions);
  }
}

Upvotes: 1

Related Questions