Custom component not showing in Ionic v4 + Angular 6


#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.