Toast test error: TypeError: Cannot read property 'hide' of null

I am testing toast but the flowing error occurred to me:

TypeError: Cannot read property ‘hide’ of null

Could you share some code of what you have? Kind of hard to know what the issue is without it.

It is some dirty and not good looking code, also am I had to test it only on real device?

import 'rxjs';
import { Toast } from '@ionic-native/toast';
import { Http } from '@angular/http';
//import { AlertController } from 'ionic-angular';
import { Component } from '@angular/core';
import { ViewController,NavController, NavParams } from 'ionic-angular';
import { Geolocation } from 'ionic-native';

@Component({
  selector: 'page-location-modal',
  templateUrl: 'location-modal.html',
  providers: [ Toast ]
})
export class LocationModalPage {
public map;
public LastLat : any; 
public LastLng : any;
public UDI : string = this.navParams.get('UDI');
public Token: string = this.navParams.get('Token');
public location;

  constructor(public toast: Toast, public viewCtrl: ViewController, public navCtrl: NavController, public navParams: NavParams, public http: Http) {

  }

   ionViewDidLoad() {

      this.initializeMap()
      
  }
closeModal() {
    this.viewCtrl.dismiss();
  }
 
initializeMap() {
  var minZoomLevel=13
Geolocation.getCurrentPosition().then((position) => {
this.map = new google.maps.Map(document.getElementById('map_canvas'),
{
zoom: minZoomLevel,
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
mapTypeControl: false,
streetViewControl: false,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(this.map);
        this.Marker();

  });

}

Marker(){ 
   let image = 'assets/img/Untitled-1.png';   
   let marker = new google.maps.Marker({    
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: this.map.getCenter(),
    icon: image
  }); 
  this.LastLat = marker.getPosition().lat();
  this.LastLng = marker.getPosition().lng();     
  this.Getaddress( marker.getPosition().lat(),marker.getPosition().lng());     
}

SetLocation(){
  this.http.get('http://mydomain.com:8089/ords/setlocation/'+this.UDI+'/'+this.Token+'/'+this.LastLat+'/'+this.LastLng)
    .map(res => res.json())
    		.subscribe(data => {    		
          console.log(data);
          if(data =="1"){
            this.toast.show("I'm a toast", '5000', 'center').subscribe(
          toast => {
                console.log(toast);
          });     
          }
      });
}
    Getaddress(LastLat, LastLng ){
    this.http.get('https://maps.googleapis.com/maps/api/geocode/json?latlng='+LastLat+ ','+LastLng + '&language=fa')
    		.map(res => res.json())
    		.subscribe(data => {
          this.location=data.results[0].formatted_address;
        });
    }
}

This is work on real device but in development environment it fails

True of most plugins. Is there a reason you’re not just using ionic’s ToastController?

1 Like

I don’t know this it is saved me so much of time.