Birden Fazla Bileşen Aynı Elementle Eşleşiyor

Derleme kapsamındaki iki veya daha fazla bileşen bir şablondaki aynı elementle eşleşiyor. Angular belirli bir elementle yalnızca tek bir bileşen ilişkilendirebildiğinden, belirsizliği önlemek için seçiciler yeterince benzersiz olmalıdır.

NOTE: Bu, yaygın bir çalışma zamanı hatası olan NG0300: Selector Collision'ın derleme zamanı karşılığıdır. Bunu derleme zamanında tespit etmek, hatanın hemen ortaya çıkması anlamına gelir.

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 ve RaisedBtn her ikisi de bu elementle eşleşiyor.
  template: `<button stroked-button raised-button></button>`,
  imports: [StrokedBtn, RaisedBtn],
})
export class App {}

Hatayı ayıklama

Kod tabanınızda aynı seçici tanımını kullandığınız yerleri aramak için hata mesajındaki element adını kullanın:

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

Her bileşenin benzersiz bir CSS seçicisine sahip olduğundan emin olun. Bu, Angular'ın beklediğiniz bileşeni oluşturmasını garanti edecektir.

Bu seçici etiket adına sahip birden fazla bileşen bulmakta zorlanıyorsanız, Angular Material gibi import edilmiş bileşen kütüphanelerinden gelen bileşenleri kontrol edin. Çakışmaları önlemek için seçicileriniz konusunda en iyi uygulamaları takip ettiğinizden emin olun.