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

Don't think this is an answer or that it deserves a new question, but I came here because my lazy-loaded page got this error. Along with the accepted answer of importing the `ComponentsModule` into the page module, I had to add the component to `entryComponents` of the components module (which is shown in the question). — Jason Goemaat, Apr 30 '18 at 06:13

score 31 · Answer 1 · answered May 09 '17 at 14:04

31

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.

answered May 09 '17 at 14:04

Sid Puttur

311
2
3

1

I my opinion you have to move `MyHeaderComponent` from `declarations` to `imports` otherwise it will not work – Georg Kastenhofer Jul 12 '18 at 11:38
@Sid Puttur Can you help?I want to use a component (UserCardComponent) in 2 or more pages. I declared the component in my HomePage module and was able to use it fine but when I tried to declare it in another module I get error "Type UserCardComponent is part of the declarations of 2 modules: HomePageModule and ContactsPageModule! Please consider moving UserCardComponent to a higher module that imports HomePageModule and ContactsPageModule. You can also create a new NgModule that exports and includes UserCardComponent then import that NgModule in HomePageModule and ContactsPageModule." – Sarah Sep 12 '18 at 19:29

Suraj Rao · Accepted Answer · 2017-04-20T09:07:10.173

18

You dont have to import MyHeaderComponent in ngModule.

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

 imports: [
    MyHeaderComponentModule,
  ],

edited Apr 20 '17 at 09:07

answered Apr 20 '17 at 08:54

Suraj Rao

29,388
11
94
103

Thanks, I didn't think about importing it in the page module `home.module.ts` directly. For some reason it doesn't work if I import it in my `app.module.ts`. I tried that before because I thought that would make it available "gobally". – Andreas Gassmann Apr 20 '17 at 09:04
1

for Ionic 3 don't put in imports but in declarations of your page module. – Zeeshan Anjum Dec 28 '17 at 15:10
3

@ZeeshanAnjum modules go in imports. page/component go in declaration – Suraj Rao Dec 28 '17 at 15:17

Aragorn · Answer 3 · 2018-09-28T17:41:51.930

Late answer for the thread, but I'm sure there's more people that can use this information explained in another perspective.

In Ionic, custom angular components are organized under a separate module called ComponentsModule. When the first component is generated using ionic generate component, along with the component, ionic generates the ComponentsModule. Any subsequent components gets added to the same module, rightly so.

Here's a sample ComponentsModule

import { NgModule } from '@angular/core';
import { CustomAngularComponent } from './custom/custom-angular-component';
import { IonicModule } from 'ionic-angular';
@NgModule({
    declarations: [CustomAngularComponent],
    imports: [IonicModule],
    exports: [CustomAngularComponent],
    entryComponents:[

      ]
})
export class ComponentsModule {}

To use the ComponentsModule in the app, like any other angular modules, the ComponentsModules needs to be imported to the AppModule. ionic generate component (v 4.12) does not add this step, so this has to be added manually.

Excerpt of AppModule:

@NgModule({
  declarations: [
    //declaration
  ],
  imports: [
    //other modules 
    ComponentsModule,
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    //ionic pages
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    //other providers
  ]
})
export class AppModule {}

Logically it should be working, but it is still not working. I ran ionic g component custom-angular-component and then followed the same, but still, it's not working. — Ashutosh Kumar, Nov 06 '19 at 16:14

score 0 · Answer 4 · answered Apr 20 '17 at 07:59

0

You must import component in the module. Make sure you also export that component.

@NgModule({
    imports: [
        IonicModule,
    ],
    declarations:[
        MyHeaderComponent
    ],
    exports:[
        MyHeaderComponent
    ],
    entryComponents:[
        MyHeaderComponent
    ]

})

answered Apr 20 '17 at 07:59

ACES

460
4
16

Sadly that still doesn't work for me. I updated my question to include code samples. – Andreas Gassmann Apr 20 '17 at 08:39
That didn't work either... I fixed it using suraj's answer, but thanks for your help! – Andreas Gassmann Apr 20 '17 at 09:01

score 0 · Answer 5 · edited Feb 10 '18 at 13:39

0

Here is my module. Hope it will help you answer your question:

@NgModule({
  declarations: [
    TestPage
  ],
  imports: [
    IonicPageModule.forChild(TestPage),
    TranslateModule.forChild(),
    PipesModule,
    NavigatorComponentModule
  ],
  exports: [
    EntriesPage,
  ],
  providers:[
    NavigatorComponent
  ]
})

edited Feb 10 '18 at 13:39

Gal Silberman

3,756
4
31
58

answered Feb 10 '18 at 13:18

suanter

9
1

score 0 · Answer 6 · answered Feb 10 '18 at 13:28

Just to clarify: I am using the a custom navigatorComponent in many pages (reusable component).

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TranslateModule } from '@ngx-translate/core';
import { PipesModule } from '../../pipes/PipesModule';
import { NavigatorComponent } from '../../components/navigator/navigator';
import { ComponentsModule } from '../../components/components.module';
import { NavigatorComponentModule } from '../../components/navigator/navigator.module';

@NgModule({
  declarations: [
    TestPage,

  ],
  imports: [
    IonicPageModule.forChild(EntriesPage),
    TranslateModule.forChild(),
    PipesModule,
    NavigatorComponentModule

  ],
  exports: [
   TestPage,

  ],
  providers:[
    NavigatorComponent
  ]
})
export class TestPageModule {}

Note: the navigatorComponent has 4 files: the ts, css, html and yourcomponentname.module.ts. The "ionic g component " command doesn't generate the last file (yourcomponentname.module.ts). So I did it.

ionic g component generates "components.module.ts" that is one module to include all the components in ionic. That module should be included in the NgModule imports. — Aragorn, Sep 28 '18 at 17:24

Custom component in ionic v3

6 Answers6

Linked