Importing custom Ionic 3 components

This is how I solved it:

• Let's say your custom-component.ts is exporting a class CustomComponent
  
  .

• import the 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 { }
  
        
  
          
          
          
        
  
      

• Now import your custom component to the page you want 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).

You must export the component test

.

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

      

        
        
        
      

    

One way is to add each component to your app.module.ts file and then declare the following:

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

      

        
        
        
      

    

After successfully using CUSTOM_ELEMENTS_SCHEMA declarations in my modules, which forces you to call your selectors with a "-" trait, so I'll have to use something like:

<MyPlayer-comp></MyPlayer-comp>

      

        
        
        
      

    

I was saddened by this complete nonsensical behavior of these frameworks on camel suitcases, even if it worked and ngc no longer complained about "... unknown element ...".

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

I went back to the next one, which works with lazy loading while I'm building for the web. (Ionic Cordova for browser build --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 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 link below:
http://evalogical.com/blog/components-ionic-framework-3

1. Import the component to the file home.ts
   
   as follows:
   import { MyComponent } from '../../components/my/my';
   
   

2. In home.module.ts
   
   import ComponentsModule
   
   and add it to import, 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 to a file components.module.ts
   
   , 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 line
   import { HomePage } from '../pages/home/home';
   
   from file app.module.ts
   
   and add the following line insteadimport { HomePageModule } from '../pages/home/home.module';
   
   

5. Now you can use component selector as HTML tag in file home.html