Ionic components inside custom component ionic-v4

How to use ionic components in custom component? I have created component and i want to use <ion-header> on that and giving error obviously. so how and where have to import ionic components in custom component?

1 Like

Which error does it give ?

'ion-header' is not a known element:
1. If 'ion-header' is an Angular component, then verify that it is part of this module.
2. If 'ion-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ion-header>

hmm ok, As far as i know you dont have to import ionic components. Could you post the .ts files and .html files of your custom component ?


import { Component, OnInit } from '@angular/core';

  selector: 'app-header-outer',
  templateUrl: './header-outer.component.html',
  styleUrls: ['./header-outer.component.scss']
export class HeaderOuterComponent implements OnInit {

  constructor() { }

  ngOnInit() {




Do other ion components work and is this the only one that doesnt work ?

all ionic components not working

Incase you upgraded from ionic 3 to 4 i advise you to follow the migration guide:

Their are other ones out there.

If this is a new project i’ve got no idea whats going on and i’m sorry but i cant help you

already have latest one. i think u didnt understand my query. i m using custom component, not page.

Plz post the code of the module related to HeaderOuterComponent
Or double check that you import IonicModule in that module

no module page created by ionic. need to create one?

ok its working now :grinning:
imported import { IonicModule } from '@ionic/angular'; in component.module.ts
thanks :slight_smile:

1 Like

Was about to answer that, coolio

1 Like

Hi! Ive the same problem… Where you imported this import { IonicModule } from ‘@ionic/angular’;?

I need to create a new archive in my component?


1 Like

in common module file for all components. where u imported all components.

Sorry! I cant find this file… I feel like a dumb :frowning:

This is my proyect… Where I could find this file to put the import?

Thank you so much!!


import { NgModule } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { HeaderInnerComponent } from './header-inner/header-inner.component';
import { HeaderOuterComponent } from './header-outer/header-outer.component';
import { HeaderBodyComponent } from './header-body/header-body.component';
import { HeaderLoginComponent } from './header-login/header-login.component';
import { FooterCommonComponent } from './footer-common/footer-common.component';

  declarations: [
  exports: [
  imports: [
export class ComponentsModule {}

and this component.module.ts call in every page.module.ts where you want to use component. like this:

import { ComponentsModule } from '../components/component.module';

It works!! Thank you so much!!