1

hello i'm trying use to use lazy loading with modal component, so i have a shared components module like this:

@NgModule({
  declarations: [
    AddNoteComponent,
    EditNoteComponent
  ],
  imports: [
    IonicModule,
  ],
  exports: [
    AddNoteComponent,
    EditNoteComponent
  ]
})
export class ComponentsModule {}

i want to use them in notes.ts page, so i imported the componentsModule class to the notes.module.ts like this:

@NgModule({
  declarations: [
    NotesPage,
  ],
  imports: [
    IonicPageModule.forChild(NotesPage),
    ComponentsModule,
  ],
})
export class NotesPageModule {}

so in my notes.ts this function should work

addNoteModal() {
  let noteModal = this.modalCtrl.create('AddNoteComponent', {
    'mid': this.module.key
  });
  noteModal.present();
}

this should work pefectly while i use lazy loading,

but ionic tells me that :

ERROR Error: Uncaught (in promise): invalid link: AddNoteComponent

here is my environment :
Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.2
Angular Core: 5.0.1
Angular Compiler CLI: 5.0.1
Node: 8.4.0
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Mobile Safari/537.36

2
  • 2
    I think your AddNoteComponent should be a page, i.e. it should have a @IonicPage() decorator.
    – Sébastien
    Dec 3, 2017 at 2:45
  • yeah but i want it to be just a component, it's in the components folder
    – bondif
    Dec 3, 2017 at 12:12

1 Answer 1

1

You need to use a page as a modal, not a regular component. So if you want to create a modal with the content of the AddNoteComponent, you'll need to create a new page (including the @IonicPage() decorator so it could be lazy-loaded) that imports that component, and then use that page as the modal.

So this would be the page:

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

// Ionic
import { IonicPage } from 'ionic-angular';

@IonicPage()
@Component({
    selector: 'page-add-note',
    templateUrl: 'add-note.html'
})
export class AddNotePage {

    constructor() { }

    // ...

}

This would be the module of the page:

@NgModule({
  declarations: [
    AddNotePage,
  ],
  imports: [
    IonicPageModule.forChild(AddNotePage),
    ComponentsModule,
    // ...
  ],
})
export class AddNotePageModule {}

And this is how you'll use that page:

addNoteModal() {
  let noteModal = this.modalCtrl.create('AddNotePage', {
    'mid': this.module.key
  });
  noteModal.present();
}
3
  • 1
    but before i do lazy loading it was working fine, is it possible to work with the components
    – bondif
    Dec 3, 2017 at 12:20
  • It probably worked before since not lazy-loaded pages are just components but I'm afraid that's not the way it should be done in Ionic when using lazy-loaded pages. Dec 3, 2017 at 12:26
  • 1
    Glad to help @MohamedBOUKHLIF :) Dec 3, 2017 at 12:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.