Runtime Error Uncaught (in promise): TypeError: Cannot read property 'wallpaper' of undefined TypeError: Cannot read property 'wallpaper' of undefined


#1

I am building a wallpaper ionic app.I installed ‘cordova-plugin-wallpaper’ which is the cordova plugin for setting image in the app as the wallpaper.

I followed instructions on the plugin website https://www.npmjs.com/package/cordova-plugin-wallpaper for installing the plugin.After following the instructions i am getting the following output in the ionic serve --lab

Runtime Error
Uncaught (in promise): TypeError: Cannot read property 'wallpaper' of undefined TypeError: Cannot read property 'wallpaper' of undefined at http://localhost:8100/build/main.js:67:28 at t.invoke (http://localhost:8100/build/polyfills.js:3:9283) at Object.onInvoke (http://localhost:8100/build/vendor.js:4508:37) at t.invoke (http://localhost:8100/build/polyfills.js:3:9223) at r.run (http://localhost:8100/build/polyfills.js:3:4452) at http://localhost:8100/build/polyfills.js:3:14076 at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9967) at Object.onInvokeTask (http://localhost:8100/build/vendor.js:4499:37) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9888) at r.runTask (http://localhost:8100/build/polyfills.js:3:5143)

Stack

Error: Uncaught (in promise): TypeError: Cannot read property 'wallpaper' of undefined
TypeError: Cannot read property 'wallpaper' of undefined
    at http://localhost:8100/build/main.js:67:28
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9283)
    at Object.onInvoke (http://localhost:8100/build/vendor.js:4508:37)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9223)
    at r.run (http://localhost:8100/build/polyfills.js:3:4452)
    at http://localhost:8100/build/polyfills.js:3:14076
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9967)
    at Object.onInvokeTask (http://localhost:8100/build/vendor.js:4499:37)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9888)
    at r.runTask (http://localhost:8100/build/polyfills.js:3:5143)
    at c (http://localhost:8100/build/polyfills.js:3:13535)
    at http://localhost:8100/build/polyfills.js:3:14107
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9967)
    at Object.onInvokeTask (http://localhost:8100/build/vendor.js:4499:37)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9888)
    at r.runTask (http://localhost:8100/build/polyfills.js:3:5143)
    at o (http://localhost:8100/build/polyfills.js:3:2203)
    at HTMLElement.invoke (http://localhost:8100/build/polyfills.js:3:10985)

Additional info:
Ionic Framework: 3.6.1
Ionic App Scripts: 2.1.4
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 6.11.3
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.91 Safari/537.36

home.ts

import { Component } from '@angular/core';
import { NavController,Platform } from 'ionic-angular';
import { ListPage } from '../list/list';

declare var window: any;
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController,private platform: Platform) {

  }
  goPage1(){
    this.navCtrl.push(ListPage);
  }
  setwall(){
  this.platform.ready().then(() => {
 
    window.plugins.wallpaper.setImage("assets/img/3.jpg");
});
}
}

home.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Wallfeed</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="card-background-page">
  
    <ion-card (click)="goPage1()">
      <img src="assets/img/1.png"/>
      <div class="card-title">São Paulo</div>
      <div class="card-subtitle">41 Listings</div>
    </ion-card>
  
    <ion-card>
      <img src="assets/img/2.jpg"/>
      <div class="card-title">Amsterdam</div>
      <div class="card-subtitle">64 Listings</div>
    </ion-card>
  
    <ion-card (click)="setwall()">
      <img src="assets/img/3.jpg"/>
      <div class="card-title">San Francisco</div>
      <div class="card-subtitle">72 Listings</div>
    </ion-card>
  
    <ion-card>
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ16sUl5EqIDeuP1AjIX6ESSbAFAcS2-JLr4znf-extlfIr47Ni"/>
      <div class="card-title">Madison</div>
      <div class="card-subtitle">28 Listings</div>
    </ion-card>
  
</ion-content>

#2

Hi coderwizard, did you solve this error ? I’ve one similar with cordova-plugin-sqlserver :slight_smile:


#3

what is the solution?? I have the same problem … I need help pls !


#4

hello,

if I understand it right that you get undefined, because magic late binding to a plugin fails. If yes, you should provide name of the plugin, because different plugins has maybe different solutions.

Maybe one of the definitions in this post helps. How to use non native plugins on Ionic?

If I am wrong, sorry for disturbing.

Best regards, anna-liebt


#5

thanks, I will try to solve the problem