Custom component: is not a known element:

Ionic Framework
1

Hi guys,
sorry for this topic (i have read other in this furum) but i can’t find a solution.

I have generate a new ionic component with command:

ionic g component WelcomeSlider

into …/src/component/welcome-slider/

this is “welcome-slider.component.ts”

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

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

  constructor() { }

  ngOnInit() {}

}

this is “app.module.ts”

...
import { WelcomeSliderComponent } from '../components/welcome-slider/welcome-slider.component';

@NgModule({
  declarations: [AppComponent, WelcomeSliderComponent],
   ...
})

export class AppModule {}

this is “my.page.html”

<app-welcome-slider></app-welcome-slider>

And this is my console error in the browser:

core.js:13987 'app-welcome-slider' is not a known element:
1. If 'app-welcome-slider' is an Angular component, then verify that it is part of this module.
2. If 'app-welcome-slider' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

what am I wrong?
Thanks so much for your help

1 Like
2

Can you share github repo with minimal code to reproduce

3

Hi @indraraj26,
thank you for your time. I have find the solution: simply, i have include Component directly in mi custom-page.module.ts.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { WelcomePagePageRoutingModule } from './welcome-page-routing.module';

import { WelcomePagePage } from './welcome-page.page';
import { WelcomeSliderComponent } from '../../components/welcome-slider/welcome-slider.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    WelcomePagePageRoutingModule
  ],
  declarations: [WelcomePagePage, WelcomeSliderComponent]
})
export class WelcomePagePageModule {}
1 Like
4

Great suppose in future you would like to use welcomeslidercomponent in any other module just create an shared sliderModule feat module then import it in every feat module of your app

1 Like
5

Dear future reader of this thread who wonders “does it really have to be that complicated?”: no. You could also simply include all these things in the declarations stanza of your AppModule and be done with all the submodule hassle.

2 Likes
6

Mmmm, i tried this way but, when i have implemented component into App.module.ts and insert componet into another html page

<app-welcome-slider></app-welcome-slider>

i have received error:

core.js:13987 'app-welcome-slider' is not a known element:
1. If 'app-welcome-slider' is an Angular component, then verify that it is part of this module.
2. If 'app-welcome-slider' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
7

Please post the exact way you did this.

8

Hello there, I’m facing the same issue here. I created a component with ionic generate component components/page_name but my component doesn’t have .module file. And can not figure out how to deal with this. Can you help me?

Edit:

When I tried to implement .component into my homepage for example. It gives an error like: ‘Module ‘"…/…/components/chat/chat.component"’ has no exported member ‘ChatModule’’.