el código funcionaba bien en la versión angular 8.3.4 pero cuando lo actualicé a la última versión de angular (9) recibí el siguiente error
siguiente es el seguimiento de la pila
core.js:3866 ERROR Error: Uncaught (in promise): Error: Multiple components match node with tagname app-lobby Error: Multiple components match node with tagname app-lobby at throwMultipleComponentError (core.js:5511) at findDirectiveDefMatches (core.js:8276) at resolveDirectives (core.js:8080) at elementStartFirstCreatePass (core.js:14215) at ɵɵelementStart (core.js:14249) at Module.ɵɵelement (core.js:14324) at MainComponent_Template (main.component.html:1) at executeTemplate (core.js:7562) at renderView (core.js:7387) at renderComponent (core.js:8577) at resolvePromise (zone.js:836) at resolvePromise (zone.js:795) at zone.js:897 at ZoneDelegate.invokeTask (zone.js:431) at Object.onInvokeTask (core.js:27769) at ZoneDelegate.invokeTask (zone.js:430) at Zone.runTask (zone.js:198) at drainMicroTaskQueue (zone.js:611) at ZoneTask.invokeTask (zone.js:517) at ZoneTask.invoke (zone.js:502)Probablemente tenga más de un componente con el mismo nombre de etiqueta de selector app-lobby
... @Component({ selector: 'app-lobby', ... Vuelva a verificar para asegurarse de que solo un nombre de etiqueta de selector de componente sea app-lobby .
Se deben considerar las dos respuestas anteriores sobre la declaración de DatePipe en providers . Hoy encontré este problema (Angular 9) al agregar un argumento private datePipe: DatePipe en el constructor de mi componente sin declarar DatePipe en el provider del módulo. Después de agregar DatePipe en providers , no tengo más problemas.
El constructor:
constructor(private authenticationService: AuthenticationService, private datePipe: DatePipe) {}Recibí exactamente el mismo error que decía Error: Multiple components match node with tagname <my-tagname> y verifiqué durante demasiado tiempo que esta etiqueta es, de hecho, única. Después de leer esta pregunta y todas las respuestas por segunda vez, encontré el comentario de @Eugen sobre la pregunta original y eso finalmente me ayudó. Así que estoy agregando esto aquí con un pequeño ejemplo en caso de que todos tengan este problema en el futuro. El mensaje de error de Angular realmente no ayuda aquí.
Mi error fue que inyecté un servicio en mi componente y lo usé directamente en el constructor así:
constructor(private myService: MyService) { this.myService.doSomething() }Eso no funciona porque introduce una condición de carrera entre la inyección de dependencia de Angular y yo que quiero usar el servicio en el constructor. Dentro del constructor, el servicio aún no está instanciado.
Lo que desea hacer es usar ese servicio después de que se haya llamado al constructor, es decir, en el gancho OnInit de Angular:
export class MyComponent implements OnInit { constructor(private myService: MyService) {} ngOnInit(): void { this.myService.doSomething(); } // Rest of the component }