fix(core): improve multiple components match error

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

@@ -1404,7 +1404,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

@@ -374,6 +374,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', () => {