Modal - ERROR Error: Uncaught (in promise): invalid link

Ionic Framework ionic-v3
1

Hello!

I’m having a problem in presenting a Modal.

I tried to follow this tutorial:

It is very simple, but I keep getting the error below:
ERROR Error: Uncaught (in promise): invalid link: ModalPage

What am I doing wrong?!

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <p>
    <button ion-button (click)="openModal()">Open Modal</button>
  </p>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController, ModalController } from 'ionic-angular';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(private modalCtrl: ModalController) {

  }

  openModal(){
    const modal = this.modalCtrl.create('ModalPage');

    modal.present();
  }

  closeModal(){
    
  }

}

modal.html

<ion-header>

  <ion-navbar>
    <ion-title>ModalPage</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

</ion-content>

modal.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the ModalPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-modal',
  templateUrl: 'modal.html',
})
export class ModalPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ModalPage');
  }

}
2

Hello,
I solved this problem by simply adding the page again by running this command “ionic g page model” and be sure to update your ionic script first.
Good Luck

1 Like
3

Import and add @IonicPage to the component

3 Likes