How to use one component in other in Ionic with lazy loading?

Question

I have two components: ListPage and SearchSite. The second has selector: 'search-sites'. Before lazy loading I just put <search-sites></search-sites> in template and that's all. After adding lazy loading I get error:

ERROR Error: Uncaught (in promise): Error: Template parse errors: 'search-sites' is not a known element: 1. If 'search-sites' is an Angular component, then verify that it is part of this module. 2. If 'search-sites' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

[ERROR ->]

"): ng:///ListPageModule/ListPage.html@7:1 Error: Template parse errors: 'search-sites' is not a known element: 1. If 'search-sites' is an Angular component, then verify that it is part of this module. 2. If 'search-sites' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

SearchSite is declared in main NGModule file.

Could you try by adding the component also in the page's module? Since each page is it's own module, you need to import the component in the page's module as well. — sebaferreras
@sebaferreras can you show an example? I'm not familiar with angular... — Kin
Of course :) I didn't add it as an answer before because I'm still learning how to work with Lazy Loading, but I'll write an answer and if it doesn't fix the issue, I'll remove it — sebaferreras

sebaferreras sebaferreras · Accepted Answer · 2017-06-09T09:40:35

Note: I'm still learning how to work with the lazy loading feature, so please feel free to edit the answer if I'm saying something wrong.

Another note: If the component is going to be used in a modal create it like a lazy loaded new page and use it like this:

let profileModal = this.modalCtrl.create('Profile', { userId: 8675309 });
profileModal.present();

So if the component is not going to be used in a modal, first create a module for your component, like this:

// your-component.module.ts

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

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

// Component
import { YourComponent } from '../folder/your-component';

@NgModule({
    imports: [IonicModule],
    declarations: [YourComponent],
    exports: [YourComponent]
})
export class YourComponentModule { }

AFAIK, when working with lazy loading, we'll need to import the components/pipes in every module where it's being used. Some users prefer to include all the components in one shared module, some others prefer to create a dedicated module for each component.

Please keep in mind that each page's module will get it's own copy of the component's code, so I think it'd be better to create a module for each component, so each page only loads the code that it really needs to work properly, instead of loading a bigger module with things that are not being used later.

After that, go to your page's module file and import the component's module like this:

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

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

// Components
import { YourComponentModule } from '../folder/your-component.module';

// Pages
import { YourPage } from './your-page';

@NgModule({
    declarations: [YourPage],
    imports: [YouComponentModule, IonicPageModule.forChild(YourPage)],
    exports: [YourPage]
})
export class YourPageModule { }

How to use one component in other in Ionic with lazy loading?

1 Answers