Lazy load and Modal Pages

Ionic Framework ionic-v3
1

I have to put all modal pages componetns inside entry module to work(wich load em on start up not lazy) ot thre is a way to load thmem when its necessary?

2

I expect you can create individual modules for each of them and import those modules in the page modules that use these modals, but I have decided to leave lazy page loading alone for now.

3

Yes, I’ve tried such approach but got error.

4

So any news about this issue?

5

what issue? I don’t understand ur problem

6

I have a page that I use as modal. But the only way that i found to work it to add it as entry component which is quite strange for “lazy load”.

7

Modal page is a typically page so lazy load it like others pages.

1 Like
8

May be you not added .module.ts for modal page?

my code:

select-modal.ts

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

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

select-modal.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TranslateModule } from '@ngx-translate/core';
import { SelectModalPage } from './select-modal';

@NgModule({
  declarations: [
    SelectModalPage,
  ],
  imports: [
    IonicPageModule.forChild(SelectModalPage),
    TranslateModule.forChild()
  ],
  exports: [
    SelectModalPage
  ]
})
export class SelectModalPageModule {}

and on parent page push modal:

openSchoolSelectModal() {
  	let schoolModal = this.modalCtrl.create('SelectModalPage');
		schoolModal.onDidDismiss(data => {
			if (typeof data != 'undefined') {
				...			
                        }
		});
		schoolModal.present();
  }
4 Likes
9

Ohh… I’ve found a problem.
I have got this code:
this.modalCtrl.create(MyModalPage); where is MyModalPage ismy page component. Acording to docs thats how it works. But I’ve changed it to this.modalCtrl.create('MyModalPage'); and it works now. So for lazy load we must use names(segments?) that was provided in @IonicPage() to make it work.
Thank you very much Stanislav your code samples helps a lot :slight_smile:

4 Likes
10

U’re welcome

…

11

Is that correct?

The documentation doesn’t say to use @IonicPage() annotation:

Modal Controller API Doc

12

Read the posts on the official Ionic blog about lazy loading and you’ll see what’s going on.

13

Is there a link for the lazy loading discussion on the blog?

14

Modal page is a typical page… but modal. So it is correct to using @IonicPage()

1 Like