Cannot use Toast, gives me a blank screen (with no errors)

Ionic Framework ionic-v3
1

Hi, I am using Ionic 2 and wanted to use Toasts like here: https://github.com/driftyco/ionic-preview-app/tree/master/app/pages/toast/basic

However, upon inserting the code into my project (I am using the default template with some modifications already), it simply returns me a blank screen. The blank screen seems to come up as soon as I add “public nav: NavController” to the constructor.

Can anyone help me out? Here is the full code of the relevant page.

I have installed the Toast plugin using

cordova plugin add cordova-plugin-x-toast

page.html

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


<ion-content padding class="ion-content-container" (click)="showToast()">

    <div class="loading-container">
        <ion-spinner></ion-spinner>
    </div>

</ion-content>

page.ts

import {Component} from '@angular/core';
import {Http} from '@angular/http';
import {NavController, Toast} from 'ionic-angular';
import 'rxjs/add/operator/map';


@Component({
    templateUrl: 'build/pages/page.html'
})

export class Page {

    static get parameters() {
        return [[Http]];
    }

    constructor(public nav: NavController, private http: Http) {

    }


    showToast() {
        let toast = Toast.create({
            message: 'Mmmm, buttered toast',
            duration: 2000,
            position: "bottom"
        });

        this.nav.present(toast);
    }
}

I am testing the code using ionic serve c s and no errors are shown.

I can show you more of my source code if you want me to.

2

You have JavaScript syntax for the parameters getter and TypeScript syntax for the constructor arguments. That sounds like a recipe for disaster.

3

What would you change to solve the issue?

4

Convert the project to TypeScript (if it’s not) and lose the parameters getter.