Custom component not showing in Ionic v4 + Angular 6

Ionic Framework
1

Hi, I asked this question on stack overflow but i’ve received no answers. Maybe too ionic-specific question? Don’t know. I’m having troubles creating custom components on Ionic v4 application. Probably I’m missing something but no idea of what. Can anyone please help me? Thanks in advance

2

You are not declared CustomComponentComponent into module.
CustomComponentComponent missing in declarations of components.module.ts

3

Hi @iamdevsaikat, thank you for your answer. That is an error i’ve made in writing my question. My original component is called “ProvaComponentComponent” but I translated it in “CustomComponentComponent” for a better readability for english-speaking comunity. Now i’m going to edit my question with the correct component name in declaration

4

console anything on CustomComponentComponent OnInit( ) method and check the is it there on console logs.

5

Not logging anything :frowning: . So you can confirm the procedure is correct?

6

in your app.module.ts file (and any other lazy loading modules), add the follow:

import { NgModule, /** ADD THIS -> **/ CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

and in the @NgModule decorator add:

@NgModule({
    declarations: [...],
    entryComponents: [...],
    imports: [...],
    exports: [...],
    providers: [...],
    /** ADD THIS -> **/ schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export AppModule {}
7

Why do you recommend this?

8

from what i understand, it explicitly allows angular to recognize your custom components. I was getting this error in Ionic v3 and this still seems to be a working solution for v4.

Have you been able to work with custom components without these added lines?

CUSTOM_ELEMENTS_SCHEMA Docs (angular.io)

9

I suppose it depends on how you define “custom component”, but my understanding is that CUSTOM_ELEMENTS_SCHEMA just ignores what would ordinarily be an error. If you are building this “custom component” from within Ionic, as I am gathering is the case in this discussion from the mentions of importing component modules, the component in question is an Angular component, and so CUSTOM_ELEMENTS_SCHEMA will only kick the problem down the road, not solve anything.

10

@rapropos I guess, that was more the problem i was facing back then… i thought it might work here as well

@jkl807 i think i see the problem now.
Try including CustomComponentComponent in the ‘entryComponents’ array in the ComponentsModule
This way when HomePageModule imports the ComponentsModule, CustomComponentComponent is recognized

11

Thanks @jjdev the entryComponent thing fixed the problem. Tomorrow I will post the answer also on stackoverflow, mentioning original answerer. Thanks also to all the other users that answered my question, you’re a very active and kind comunity.

12

Hi, i am in Ionic v4 Angular 7, your way is not work for me.
However, instead of
entryComponents : [CustomComponentComponent]
this work for me.

exports: [ComponentComponent]

I am new in angular so hope someone will able to explain which one is the correct solution.

13

exports: [...]

The set of components, directives, and pipes declared in this NgModule that can be used in the template of any component that is part of an NgModule that imports this NgModule

entryComponents: [...]

An entry component is any component that Angular loads imperatively, (which means you’re not referencing it in the template), by type.

15

I still not quite understand for that.
So it thats like if I need to use the Component as a template in the html like <app-seletor></app-seletor> then use exports: []

And if I have a CustomLoadingComponent and i want to import to home page
then i need to use entryComponents: [ CustomLoadingComponent ] for import the function myLoadingFunc() to home.ts and use exports: [ CustomLoadingComponent ] to display the loading template in home.html