Ionic 3 Import Custom Component

you need to do it like below:

import { ComponentsModule } from "../../components/components.module";
@NgModule({
  declarations: [
    OtherPage,
    ComponentsModule,
  ],
  imports: [
    IonicPageModule.forChild(OtherPage),

    ],
  entryComponents: [
    ComponentsModule
  ]
})
export class OtherPageModule {}

• I 've tried this but the component is still unknown to the app - fitzmode

You must export the test component.

@NgModule({
  declarations: [
    TestComponent,
  ],
  imports: [],
  exports: [TestComponent]
})
export class ComponentModule {}

• The component is already exported in the components.module.ts- - fitzmode

As indicated here https://github.com/ionic-team/ionic/issues/11560

unfortunately there's no way to make lazy load component, directive, pipe. any way let us know if you manage it.

So you can import your ComponentsModule in your page.module.ts . Here is mine.

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ComponentsModule } from ../../components/components.module';

@NgModule({
  declarations: [
    WoDetailsPage,

  ],
  imports: [
    ComponentsModule,
    IonicPageModule.forChild(WoDetailsPage),
  ],
})
export class WoDetailsPageModule {}

• IonicForum - Discussion Refer to the discussion posted by yubin_zhu Apparently, importing just IonicModule suffices without forChild or forRoot does the trick. As far as I tested, this worked for me. @NgModule({ imports:[IonicModule], //no forRoot here declarations:[HomePage], exports:[HomePage], entryComponents:[HomePage] //<-- add all your module components to here }) - Sameer Achanta

One way is to add each component into your app.module.ts file and then declare as follows:

import { MyComp } from "../../components/my-comp/my-comp";
@NgModule({
  declarations: [
    OtherPage,
    MyComp
  ],
  imports: [
    IonicPageModule.forChild(OtherPage)
    ],
})
export class OtherPageModule {}

This is how I solved it:

1. Suppose, your custom-component.ts exports class CustomComponent.

2. import same in custom-component.module.ts as shown below:

   import { CustomComponent } from './custom-component';
   
   @NgModule({
     declarations: [
       CustomComponent,
     ],
     imports: [
       IonicPageModule.forChild(CustomComponent),
     ],
     exports : [ CustomComponent ]
   })
   export class CustomComponentPageModule { }
   

3. Now import your custom component in the page you want it in, as shown below:

   import { ContentDrawerPageModule } from '../../../components/custom-component/custom-component.module';
   
   @NgModule({
     declarations: [
       HelloWorldPage,
     ],
     imports: [
       IonicPageModule.forChild(HelloWorldPage),
       CustomComponentPageModule,
     ]
   })
   export class HelloWorldPageModule {}
   

And you have successfully imported your custom component (CustomComponent) to your page (HelloWorldPage).

• Thanks for removing the fluff @jps. - Kapil Sharma

After successfully using the CUSTOM_ELEMENTS_SCHEMA declarations in my modules and which forces you to name your selectors with a "-" dash, so I would have to use something like:

<MyPlayer-comp></MyPlayer-comp>

I was upset with this total non-sense from these frameworks camel-case freaks even though it worked and ngc no longer complained about "...is not a known element...".

I personally prefer to name everything the same (the class, the selector, the file, etc...)

I reverted to the following which is working with lazy-loading while I build for the web. (ionic cordova build browser --prod --release)

Your custom component module declarations:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
//
import { MyPlayerComp } from './MyPlayerComp ';
//
@NgModule({
    declarations: [MyPlayerComp ],
    imports: [IonicPageModule.forChild(MyPlayerComp )],
    exports: [MyPlayerComp ],
})
export class MyPlayerCompModule { }

In the modules where you want to use your custom component use the following:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
//
import { PlyrView } from './PlyrView';
//
import { MyPlayerCompModule } from './MyPlayerComp.module' // 20180720
//
@NgModule({
    declarations: [PlyrView],
    imports: [
        IonicPageModule.forChild(PlyrView),
        MyPlayerCompModule,                      // <<<<<
    ],                
    exports: [PlyrView],
})
export class PlyrViewModule { }

I hope this helps someone

This is how I solved it, by following the below link :
http://evalogical.com/blog/components-ionic-framework-3

1. Import the component in the home.ts file like this,
   import { MyComponent } from '../../components/my/my';

2. In home.module.ts import the ComponentsModule and add it in the imports,like this.

   import { NgModule } from '@angular/core';  
   import { IonicPageModule } from 'ionic-angular';  
   import { HomePage } from './home';  
   import { ComponentsModule } from '../../components/components.module';  
   @NgModule({  
   declarations: [  
   HomePage,  
   ],  
   imports: [  
   IonicPageModule.forChild(HomePage),  
   ComponentsModule  
   ],  
   })  
   export class HomePageModule {}
   

3. Import the IonicPageModule in the components.module.ts file and here we need to import CUSTOM_ELEMENTS_SCHEMA in schemas like this.

   import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';  
   import { MyComponent } from './my/my';  
   import { IonicPageModule } from 'ionic-angular';  
   @NgModule({  
   declarations: [MyComponent],  
   imports: [IonicPageModule.forChild(MyComponent)],  
   exports: [MyComponent],  
   schemas: [CUSTOM_ELEMENTS_SCHEMA]  
   })  
   export class ComponentsModule {}  
   

4. Remove the line
   import { HomePage } from '../pages/home/home'; from the app.module.ts file and instead add the following line import { HomePageModule } from '../pages/home/home.module';

5. Now you can use the selector of the component as a html tag in the home.html file