같은 엘리먼트와 일치하는 여러 컴포넌트

컴파일 범위 안의 둘 이상의 컴포넌트가 템플릿의 같은 엘리먼트와 일치합니다. Angular는 하나의 엘리먼트에 하나의 컴포넌트만 연결할 수 있으므로 모호하게 해석되지 않도록 셀렉터를 충분히 고유하게 지정해야 합니다.

NOTE: 이 오류는 런타임 오류인 NG0300: 셀렉터 충돌에 대응하는 빌드 시점 오류입니다. 컴파일 시점에 감지하므로 오류를 즉시 확인할 수 있습니다.

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

@Component({
  selector: '[stroked-button]',
  template: '',
})
export class StrokedBtn {}

@Component({
  selector: '[raised-button]',
  template: '',
})
export class RaisedBtn {}

@Component({
  selector: 'app-root',
  // NG8023: StrokedBtn과 RaisedBtn이 모두 이 엘리먼트와 일치합니다.
  template: `<button stroked-button raised-button></button>`,
  imports: [StrokedBtn, RaisedBtn],
})
export class App {}

오류 디버깅

오류 메시지의 엘리먼트 이름을 이용해 코드에서 같은 셀렉터를 선언한 위치를 검색하세요.

@Component({
  selector: 'YOUR_STRING',
…
})

각 컴포넌트가 고유한 CSS 셀렉터를 사용하는지 확인하세요. 그래야 Angular가 의도한 컴포넌트를 렌더링합니다.

해당 셀렉터 태그 이름을 사용하는 여러 컴포넌트를 찾기 어렵다면 Angular Material처럼 불러온 컴포넌트 라이브러리를 확인하세요. 충돌을 방지하려면 셀렉터에 대한 모범 사례를 따르세요.