CODEWITHSUNDEEP
angular
Redriel
Redriel

Reputation: 77

Component is not a known element [Angular]

I'm currently working for the first time with Angular. I have a module called Api-Lab and a component called Category-Card. The structure of of my project is:

-app
    -[+]api-lab
        -[+]category-card
            category-card.component.ts
        api-lab.component.ts
        api-lab.module.ts
    app.module.ts
    app.routing.ts

In api-lab.component.html I get the error in the title in this part of HTML code:

<div class="col-md-8 " *ngFor="let category of apiList">
            <api-lab-category-card [image]="category.image" [icon]="category.icon" [title]="category.title"
            [description]="category.description" [buttonLink]="category.buttonLink"></api-lab-category-card>
        </div>

This is the api-lab.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ApiLabComponent } from './api-lab.component';
import { SharedModule } from '../shared';
import { CategoryCardComponent } from './category-card/category-card.component';

@NgModule({
  imports: [CommonModule, SharedModule],
  declarations: [ApiLabComponent, CategoryCardComponent],
  exports: [ApiLabComponent]
})
export class ApiLabModule {}

This is the category-card.component.ts:

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

@Component({
  selector: 'app-api-lab-category-card',
  templateUrl: './category-card.component.html',
  styleUrls: ['./category-card.component.scss']
})
export class CategoryCardComponent implements OnInit {
  constructor() { }
  @Input() image: string;
  @Input() icon: string;
  @Input() title: string;
  @Input() description: string;
  @Input() buttonLink: string;
  ngOnInit() { }
}

And finally this is the app.module.ts:

import { ApiLabModule } from './api-lab/api-lab.module';

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
  // return new TranslateHttpLoader(http);
  // modifichiamo la sede di default dei file di traduzione
  return new TranslateHttpLoader(http, './assets/translations/', '.json');
}

@NgModule({
  declarations: [
  //...declarations
  ],
  imports: [
    HomeModule,
    BrowserModule,
    AppRoutingModule,
    SharedModule,
    ApiLabModule,
  ],
  providers: [
    TranslatorService,
    StyleService,
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

I looked at other problems like mine but i couldn't solve the issue. Surely I missed some import/declaration. Any advice?

Upvotes: 2

Views: 5087

Answers (3)

spots
spots

Reputation: 2738

Your api-lab.component.html template has api-lab-category-card but your components selector is app-api-lab-category-card.

When you use the ng generate component some-component-name command, the CLI will automatically prepend the "app" as the prefix. You can modify this by changing the "prefix" attribute of your project in your angular.json file.

Upvotes: 1

Sayegh
Sayegh

Reputation: 1451

You need to use <app-api-lab-category-card></app-api-lab-category-card> instead. It needs to match the selector of the component found in category-card.component.ts

Upvotes: 1

UncleDave
UncleDave

Reputation: 7188

The selector you have specified in the category-card component is app-api-lab-category-card, but you've referenced it as <api-lab-category-card> in api-lab.component.html.

Either change the selector to drop app from the start, or change api-lab.component.html to reference <app-api-lab-category-card>.

Upvotes: 5

Related Questions