셀렉터 충돌

둘 이상의 컴포넌트가 같은 엘리먼트 셀렉터를 사용합니다. 하나의 엘리먼트에는 하나의 컴포넌트만 연결할 수 있으므로 Angular가 모호하게 해석하지 않도록 셀렉터는 고유한 문자열이어야 합니다.

하나의 노드에 서로 다른 컴포넌트와 일치하는 셀렉터 두 개를 적용하거나, 하나의 노드에 적용한 셀렉터 하나가 둘 이상의 컴포넌트와 일치하면 런타임에 이 오류가 발생합니다.

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

@Component({
  selector: '[stroked-button]',
  templateUrl: './stroked-button.html',
})
export class StrokedBtn {}

@Component({
  selector: '[raised-button]',
  templateUrl: './raised-button.html',
})
export class RaisedBtn {}

@Component({
  selector: 'app-root',
  template: `
    <!-- 이 노드에는 stroked-button과 raised-button이라는 셀렉터 2개가 있으며, 각각 다른 컴포넌트 StrokedBtn과 RaisedBtn에 일치하므로 NG0300이 발생합니다.  -->

    <button stroked-button raised-button></button>
  `,
})
export class App {}

오류 디버깅

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

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

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

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