ModalCmp ionViewPreLoad error

Ionic Framework ionic-v3
1

Hi everyone, I am new to Ionic 2, and I have a problem when creating a modal.

I copied the code from the documentation, the same one they’re using from example https://ionicframework.com/docs/v2/components/#modals

Page info.html

<ion-header>
  <ion-navbar>
    <ion-title>Modals</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

  <ion-list>
    <ion-list-header>
      Hobbits
    </ion-list-header>
    <a ion-item (click)="openModal({charNum: 0})">
      Gollum
    </a>
    <a ion-item (click)="openModal({charNum: 1})">
      Frodo Baggins
    </a>
    <a ion-item (click)="openModal({charNum: 2})">
      Sam
    </a>
  </ion-list>

</ion-content>

Page info.ts

import { Component } from '@angular/core';

import { ModalController, Platform, NavParams, ViewController } from 'ionic-angular';


@Component({
  selector: 'page-info',
  templateUrl: 'info.html'
})
export class InfoPage {
  constructor(public modalCtrl: ModalController) { }

  openModal(characterNum) {

    let modal = this.modalCtrl.create(ModalContentPage, characterNum);
    modal.present();
  }
}

@Component({
  template: `
<ion-header>
  <ion-toolbar>
    <ion-title>
      Description
    </ion-title>
    <ion-buttons start>
      <button ion-button (click)="dismiss()">
        <span color="primary" showWhen="ios">Cancel</span>
        <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
      <ion-item>
        <ion-avatar item-left>
          <img src="{{character.image}}">
        </ion-avatar>
        <h2>{{character.name}}</h2>
        <p>{{character.quote}}</p>
      </ion-item>

      <ion-item *ngFor="let item of character['items']">
        {{item.title}}
        <ion-note item-right>
          {{item.note}}
        </ion-note>
      </ion-item>
  </ion-list>
</ion-content>
`
})
export class ModalContentPage {
  character;

  constructor(
    public platform: Platform,
    public params: NavParams,
    public viewCtrl: ViewController
  ) {
    var characters = [
      {
        name: 'Gollum',
        quote: 'Sneaky little hobbitses!',
        image: 'assets/img/avatar-gollum.jpg',
        items: [
          { title: 'Race', note: 'Hobbit' },
          { title: 'Culture', note: 'River Folk' },
          { title: 'Alter Ego', note: 'Smeagol' }
        ]
      },
      {
        name: 'Frodo',
        quote: 'Go back, Sam! I\'m going to Mordor alone!',
        image: 'assets/img/avatar-frodo.jpg',
        items: [
          { title: 'Race', note: 'Hobbit' },
          { title: 'Culture', note: 'Shire Folk' },
          { title: 'Weapon', note: 'Sting' }
        ]
      },
      {
        name: 'Samwise Gamgee',
        quote: 'What we need is a few good taters.',
        image: 'assets/img/avatar-samwise.jpg',
        items: [
          { title: 'Race', note: 'Hobbit' },
          { title: 'Culture', note: 'Shire Folk' },
          { title: 'Nickname', note: 'Sam' }
        ]
      }
    ];
    this.character = characters[this.params.get('charNum')];
  }

  dismiss() {
    this.viewCtrl.dismiss();
  }
}

And the following error appears when I click on it:

image
Captura de tela de 2016-12-21 10-02-01.png1366×768 30.1 KB
“ModalCmp ionViewPreLoad error: No component factory found for ModalContentPage”

I do not know what is wrong, copy the code that is in the “Demo Source”

If someone helps me please.

Thank you very much

2

I’m also getting this error using similar code.

Will update if I find anything.

1 Like
3

Might have found the solution.

Try importing the modal component into your app.module.ts file and adding it to the declarations and entryComponents.

import { ModalContentPage } from 'location/of/modalcontentpage'

declarations: [
...
ModalContentPage ,
],
imports: [
 IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
  ...
  ModalContentPage 
],
providers: [...]
6 Likes
4

Kieran.chadwick, Thank you very much, worked perfectly

:heart_eyes: :relaxed:

1 Like
5

hi i did this and it seems that i just arrived in another error that says Unexpected value ‘undefined’ declared by the module ‘AppModule’

7

Thanks So much, you saved my day :slight_smile: