Ionic 3 Import Custom Component

Question

I'm stuck with importing a custom component into a page in Ionic 3. This was relatively trivial in Ionic 2 but I cant seem to get it to work in Ionic 3.

I have an existing page module named other.After running ionic g component test, I import the automatically generated ComponentsModule into the other.module.ts and added it to the imports array.

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

    ],
})
export class OtherPageModule {}

I then add the component selector to the page as <test></test>.

This results in an error :

polyfills.js:3 Unhandled Promise rejection: Template parse errors:
'test' is not a known element:
1. If 'test' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

<ion-content padding>
[ERROR ->]<test> </test>
</ion-content>
"): ng:///AppModule/OtherPage.html@16:0 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
'test' is not a known element:
1. If 'test' is an Angular component, then verify that it is part of this module.

This does not work for me. I also tried to create an module for the test component and imported it in the same manner but this does not work for me.

I cant seem to find any documentation or examples for this.How are custom component imported in Ionic 3?

Solution 1

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).

Solution 2

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