[Angular] NG8001: 'app-xxx' is not a known element 에러

NG8001: 'app-xxx' is not a known element 에러

컴포넌트를 새로 생성해 app 컴포넌트의 자식 컴포넌트로 넣는 과정에서 에러가 발생했다.

// app.component.html
<h1>It Works!</h1>
<div>
  Start editing to see some magic happen :)
  <div class="active">hello</div>
  <app-sample-component></app-sample-component> // 👈 새로운 컴포넌트 추가
</div>

 

Error 내용

NG8001: 'app-sample-component' is not a known element:
1. If 'app-sample-component' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
2. If 'app-sample-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.

 

 

해결) 추가한 컴포넌트를 app 컴포넌트에 import해야 한다.

// app.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { SampleComponent } from './sample-component/sample-component.component'; // ✅

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, SampleComponent], // ✅
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  title = 'my-app';
}

 

 

참고 사이트

Angular 가이드