Ionic component in app.component.ts and pages

Question

im struggeling with a custom component in ionic.

I have a menu in app.html and I use lazy-loading for the pages.

I try to implement the component into the menu in app.html and into some pages.

But I can only implement it into app.html or pages, not in both.

When I include the component only in app.module.ts the component works in app.html but if I include the component in my page template I get the following error:

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

When I include the component in app.module.ts and in the page module I get the following error, because it's also included in app.module.ts:

Uncaught (in promise): Error: Type FaIconComponent is part of the declarations of 2 modules: AppModule and BookingMasterPageModule! Please consider moving FaIconComponent to a higher module that imports AppModule and BookingMasterPageModule. You can also create a new NgModule that exports and includes FaIconComponent then import that NgModule in AppModule and BookingMasterPageModule.

So my question is: How can I use the component in app.html and in my pages?

Well, second error gives you all the information you need. You need to create a module, let's call it ComponentsModule and declare and export all the components from this module. Then you can import ComponentsModule anywhere you want. — Bunyamin Coskuner
I'll put my comment as an answer so other people can see the solution easily. — Bunyamin Coskuner

Bunyamin Coskuner Bunyamin Coskuner · Accepted Answer · 2018-03-19T11:19:34

Well, second error gives you all the information you need. You need to create a module, let's call it ComponentsModule and declare and export all the components from this module. Then you can import ComponentsModule anywhere you want

components.module.ts

@NgModule({
    declarations: [MyComponent],
    exports: [MyComponent] // this line is important. If you forget it, other modules won't be able to use this component
})
export class ComponentsModule {}

app.module.ts

@NgModule({
    imports: [ComponentsModule]
})
export class AppModule {}

custom-page.module.ts

@NgModule({
    imports: [ComponentsModule]
})
export class CustomPageModule {}

Ionic component in app.component.ts and pages

1 Answers