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>
…