컴포넌트 ID 생성 충돌

Angular는 컴포넌트를 생성할 때 각 컴포넌트의 고유한 ID를 생성합니다. 셀렉터, 호스트 바인딩 수, 클래스 프로퍼티 이름, 뷰 쿼리와 콘텐츠 쿼리 등을 포함한 Angular 컴포넌트 메타데이터를 사용합니다. 두 컴포넌트의 메타데이터가 동일하면 ID 생성 충돌이 발생하며, 같은 셀렉터를 공유할 때 흔히 발생합니다.

Angular는 내부적으로 컴포넌트 ID를 다음 용도로 사용합니다.

스타일 캡슐화를 위해 DOM 노드에 추가 정보를 표시합니다.
서버 사이드 렌더링 후 하이드레이션 중에 애플리케이션 상태를 복원합니다.

컴포넌트 ID 충돌로 발생할 수 있는 문제를 피하려면 아래 설명대로 충돌을 해결하는 것이 권장됩니다.

컴포넌트 ID 충돌 예제

@Component({
  selector: 'my-component',
  template: 'complex-template',
})
class Some {}

@Component({
  selector: 'my-component',
  template: 'empty-template',
})
class SomeMocked {}

이 두 컴포넌트를 정의하면 ID 생성 충돌이 발생하며 개발 중에 경고가 표시됩니다.

오류 디버깅

경고 메시지에는 ID가 충돌하는 두 컴포넌트의 클래스 이름이 표시됩니다.

다음 방법 중 하나로 문제를 해결할 수 있습니다.

두 컴포넌트 중 하나의 셀렉터를 변경하세요. 예를 들어 다른 태그 이름과 :not()처럼 실제 선택 결과에 영향을 주지 않는 의사 셀렉터를 사용할 수 있습니다.
```
@Component({
  selector: 'my-component:not(p)',
  template: 'empty-template',
})
class SomeMocked {}
```

컴포넌트 중 하나에 호스트 속성을 추가하세요.

@Component({
  selector: 'my-component',
  template: 'complex-template',
  host: {'some-binding': 'some-value'},
})
class Some {}