Custom component in ionic v3

Question

I wanted to create a simple component and include it on a page. I created it with ionic g component my-header (ionic-cli v3 beta), fixed the IonicPageModule bug and then added to another page. I then get this error:

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

The "MyHeaderComponent" was added to the @NgModule declarations automatically.

Thanks for your help.

EDIT:

The component is located inside my components folder:

components/my-header/my-header.html

<div>   {{text}} </div> 

components/my-header/my-header.module.ts

import { NgModule } from '@angular/core'; import { IonicModule } from 'ionic-angular'; import { MyHeaderComponent } from './my-header';  @NgModule({   declarations: [     MyHeaderComponent,    ],   imports: [     IonicModule,   ],   exports: [     MyHeaderComponent   ],   entryComponents:[     MyHeaderComponent   ] }) export class MyHeaderComponentModule {} 

components/my-header/my-header.scss

my-header {} 

components/my-header/my-header.ts

import { Component } from '@angular/core';  @Component({   selector: 'my-header',   templateUrl: 'my-header.html' }) export class MyHeaderComponent {    text: string;    constructor() {     console.log('Hello MyHeaderComponent Component');      this.text = 'Hello World';   }  } 

app/app.module.ts

/* imports */ import { MyHeaderComponent } from '../components/my-header/my-header';  @NgModule({   declarations: [     MyApp,     MyHeaderComponent   ], ... 

pages/home/home.html

Answer 1

Since ionic 3 supports lazy-loading, you need not import your custom component in the app. module.ts file. Instead you can import it in specific page's module.ts file. For eg: If you want to use your custom component in your homepage you can just import it in your home.module.ts file as given below:

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

However don't forget to remove your import and declarations from app.module.ts file which is added automatically when you create your custom component.

Answer 2

You dont have to import MyHeaderComponent in ngModule.

You should import MyHeaderComponentModule in your page module where you want to use this.

 imports: [     MyHeaderComponentModule,   ],