Ionic components inside custom component ionic-v4

Ionic Framework
1

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
2

Which error does it give ?

3 
'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>
  <ion-title>
4

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 ?

5

header-outer.component.ts

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

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

  constructor() { }

  ngOnInit() {
  }

}

header-outer.component.html

<ion-header>
  <ion-title>abcd</ion-title>
</ion-header>
6

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

7

all ionic components not working

8

Incase you upgraded from ionic 3 to 4 i advise you to follow the migration guide: https://beta.ionicframework.com/docs/building/migration

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

9

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

10

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

11

10%20pm
no module page created by ionic. need to create one?

12

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

1 Like
13

Was about to answer that, coolio

1 Like
14

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

I need to create a new archive in my component?

Captura

1 Like
15

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

16

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?

Captura2
Captura2.JPG261×753 26.7 KB

Thank you so much!!

17

56%20am

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';

@NgModule({
  declarations: [
    HeaderInnerComponent,
    HeaderOuterComponent,
    HeaderBodyComponent,
    HeaderLoginComponent,
    FooterCommonComponent
  ],
  exports: [
    HeaderInnerComponent,
    HeaderOuterComponent,
    HeaderBodyComponent,
    HeaderLoginComponent,
    FooterCommonComponent
  ],
  imports: [
    IonicModule
  ]
})
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';
2 Likes
18

It works!! Thank you so much!!