fix(core): improve multiple components match error (#45645)

This commit improves the error message that is thrown at runtime when multiple components match the same element. Now the error message contains names of classes that represent those components.

PR Close #45645

packages/core/src/render3/errors.ts

@@ -8,18 +8,23 @@
  */
 
 import {RuntimeError, RuntimeErrorCode} from '../errors';
+import {Type} from '../interface/type';
 
 import {TNode} from './interfaces/node';
 import {LView, TVIEW} from './interfaces/view';
 import {INTERPOLATION_DELIMITER} from './util/misc_utils';
+import {stringifyForError} from './util/stringify_utils';
 
 
 
 /** Called when there are multiple component selectors that match a given node */
-export function throwMultipleComponentError(tNode: TNode): never {
+export function throwMultipleComponentError(
+    tNode: TNode, first: Type<unknown>, second: Type<unknown>): never {
   throw new RuntimeError(
       RuntimeErrorCode.MULTIPLE_COMPONENTS_MATCH,
-      `Multiple components match node with tagname ${tNode.value}`);
+      `Multiple components match node with tagname ${tNode.value}: ` +
+          `${stringifyForError(first)} and ` +
+          `${stringifyForError(second)}`);
 }
 
 /** Throws an ExpressionChangedAfterChecked error if checkNoChanges mode is on. */

packages/core/src/render3/instructions/shared.ts

@@ -1397,7 +1397,11 @@ function findDirectiveDefMatches(
                 `"${tNode.value}" tags cannot be used as component hosts. ` +
                     `Please use a different tag to activate the ${stringify(def.type)} component.`);
 
-            if (tNode.flags & TNodeFlags.isComponentHost) throwMultipleComponentError(tNode);
+            if (tNode.flags & TNodeFlags.isComponentHost) {
+              // If another component has been matched previously, it's the first element in the
+              // `matches` array, see how we store components/directives in `matches` below.
+              throwMultipleComponentError(tNode, matches[0].type, def.type);
+            }
           }
           markAsComponentHost(tView, tNode);
           // The component is always stored first with directives after.

packages/core/test/acceptance/component_spec.ts

@@ -349,6 +349,33 @@ describe('component', () => {
           .toThrowError(
               /"ng-template" tags cannot be used as component hosts. Please use a different tag to activate the Comp component/);
     });
+
+    it('should throw when multiple components match the same element', () => {
+      @Component({
+        selector: 'comp',
+        template: '...',
+      })
+      class CompA {
+      }
+
+      @Component({
+        selector: 'comp',
+        template: '...',
+      })
+      class CompB {
+      }
+
+      @Component({
+        template: '<comp></comp>',
+      })
+      class App {
+      }
+
+      TestBed.configureTestingModule({declarations: [App, CompA, CompB]});
+      expect(() => TestBed.createComponent(App))
+          .toThrowError(
+              /NG0300: Multiple components match node with tagname comp: CompA and CompB/);
+    });
   });
 
   it('should use a new ngcontent attribute for child elements created w/ Renderer2', () => {