fix(core): better error message when directive extends a component (#45658)

crisbeto · dylhunn · commit 57f8ab2ed81f · 2022-04-18T09:24:23.000-07:00
We throw an error when a directive is trying to extend a component, but we don't actually say which class is responsible which can be difficult to track down. These changes add the two class names to the error message. PR Close #45658
diff --git a/packages/core/src/render3/features/inherit_definition_feature.ts b/packages/core/src/render3/features/inherit_definition_feature.ts
@@ -14,6 +14,7 @@ import {ComponentDef, ContentQueriesFunction, DirectiveDef, DirectiveDefFeature,
 import {TAttributes} from '../interfaces/node';
 import {isComponentDef} from '../interfaces/type_checks';
 import {mergeHostAttrs} from '../util/attrs_utils';
+import {stringifyForError} from '../util/stringify_utils';
 
 export function getSuperType(type: Type<any>): Type<any>&
     {ɵcmp?: ComponentDef<any>, ɵdir?: DirectiveDef<any>} {
@@ -41,7 +42,9 @@ export function ɵɵInheritDefinitionFeature(definition: DirectiveDef<any>|Compo
     } else {
       if (superType.ɵcmp) {
         const errorMessage = (typeof ngDevMode === 'undefined' || ngDevMode) ?
-            'Directives cannot inherit Components' :
+            `Directives cannot inherit Components. Directive ${
+                stringifyForError(definition.type)} is attempting to extend component ${
+                stringifyForError(superType)}` :
             '';
         throw new RuntimeError(RuntimeErrorCode.INVALID_INHERITANCE, errorMessage);
       }
diff --git a/packages/core/test/acceptance/inherit_definition_feature_spec.ts b/packages/core/test/acceptance/inherit_definition_feature_spec.ts
@@ -40,7 +40,9 @@ describe('inheritance', () => {
 
     expect(() => {
       TestBed.createComponent(App);
-    }).toThrowError('NG0903: Directives cannot inherit Components');
+    })
+        .toThrowError(
+            'NG0903: Directives cannot inherit Components. Directive MyDirective is attempting to extend component MyComponent');
   });
 
   describe('multiple children', () => {
diff --git a/packages/core/test/linker/inheritance_integration_spec.ts b/packages/core/test/linker/inheritance_integration_spec.ts
@@ -73,6 +73,7 @@ describe('Inheritance logic', () => {
     const template = '<div directiveExtendsComponent>Some content</div>';
     TestBed.overrideComponent(App, {set: {template}});
     expect(() => TestBed.createComponent(App))
-        .toThrowError('NG0903: Directives cannot inherit Components');
+        .toThrowError(
+            'NG0903: Directives cannot inherit Components. Directive DirectiveExtendsComponent is attempting to extend component ComponentA');
   });
 });
