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

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 { }