error encountered with lazy loading while interacting with modal components

Question

error encountered with lazy loading while interacting with modal components

Hey there! I'm currently working on implementing lazy loading with a modal component. Here's how my shared components module looks like:

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

In order to use these components in the notes.ts page, I imported the ComponentsModule class into the notes.module.ts file as follows:

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

Now, within my notes.ts file, this function should be functional

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

This setup should work flawlessly with lazy loading enabled,

but I'm encountering an error message from Ionic:

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

Here are the details of 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

angular typescript ionic2 ionic3

Answer 1

Answer №1

It's important to utilize a page as a modal instead of a regular component. To create a modal with the content of the AddNoteComponent, you'll need to develop a new page (with the @IonicPage() decorator for lazy-loading) that imports the component, and then use that page as the modal.

The page would look like this:

// 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 is the module for the page:

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

Here is how you can utilize that page:

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

Answer 2

It's important to utilize a page as a modal instead of a regular component. To create a modal with the content of the AddNoteComponent, you'll need to develop a new page (with the @IonicPage() decorator for lazy-loading) that imports the component, and then use that page as the modal.

The page would look like this:

// 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 is the module for the page:

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

Here is how you can utilize that page:

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

error encountered with lazy loading while interacting with modal components

Answer №1

Similar questions

Switch the default blue color of Ngx-Pagination to a different color option

How can you define types for abstract React components in Typescript?

Top location for securely storing information in Angular 8

How can you ensure an interface in typescript 3.0 "implements" all keys of an enum?

Tips for displaying a multi-select dropdown in the Creative Tim Angular Material Pro filter panel

The element is inherently an 'any' type as the expression of type 'number' does not have the capability to index type 'Object'

Optimize your Kendo components in Angular with this top-notch customization strategy

Issue deploying Angular 2 and Rails 5 on Heroku: npm command not found in bash

Adding elements to an array is not functioning as expected in TypeScript

Cannot create service instance from external module

Leveraging React and TypeScript's capabilities to pass around arguments efficiently

What is the process for changing the color of material-icons to white in an Angular Dart project using angular_components?

What could be causing the headings and lists to not function properly in tiptap?

The Discordjs v13.1 bot is having trouble generating audio from an mp3 file

What is the best way to exhibit information from a get request within an option tag?

Guide to Generating a Library Using Angular-CLI

TypeScript's type inference feature functions well in scenario one but encounters an error in a different situation

What is the best way to update the color of a label in a Mantine component?

Issue with unresolved module in ESLint

I need to compile a comprehensive inventory of all the publicly accessible attributes belonging to a Class/Interface