CODEWITHSUNDEEP
angularionic-framework
John Doah
John Doah

Reputation: 1999

getting component is unknown element error although I imported the component

I'm trying to learn Angular (by creating an application with Ionic), I want to add a custom component that I would create. I used ng generate to generate a new component, but when I try to use it, in another component I get an error that says:

`'GoalCardComponent' is not a known element:
1. If 'GoalCardComponent' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.`

I tried to search, and saw some threads about this, but nothing worked (I guess maybe things changed in the framework?).

This is GoalCardComponent:

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

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

  constructor() { }

  ngOnInit() {}

}

This is the home component:

import { Component, NgModule } from '@angular/core';
import {GoalCardComponent} from '../goal-card/goal-card.component';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

@NgModule({
  entryComponents: [
    GoalCardComponent
  ],
})
export class HomePage {
  greetingTitle = "Good morning"
  motivationQuote = "A journey of a thousand miles begins with a single step"
  constructor() {}

  createGoal() {
    console.log("Clicked create goal")
  }
}

This is the home component html:

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-label id="greetingTitle">
      {{greetingTitle}}
    </ion-label>
    <br/>
    <ion-label id="motivationQuote">
      {{motivationQuote}}
    </ion-label>
  </ion-header>

  <app-goal-card>

  </app-goal-card>
  
  <ion-fab vertical="bottom" horizontal="end" slot="fixed" style="padding: 8pt;">
    <ion-fab-button (click)="createGoal()">
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

Upvotes: 2

Views: 1032

Answers (1)

saperlipopette
saperlipopette

Reputation: 1693

You need to add your custom component to the entryComponents and declarations of your appModule :

import { GoalCardComponent } from '../goal-card/goal-card.component';

@NgModule({
  declarations:[
    GoalCardComponent
  ],
  entryComponents:[
    GoalCardComponent
  ],
})

Upvotes: 2

Related Questions