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

Hi, I am using Ionic 2 and wanted to use Toasts like here:

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


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

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

    <div class="loading-container">



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

    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"


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.


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

What would you change to solve the issue?

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