Repository: angular
Issue: Cyclic imports of components need better error messages
Labels: area: core

### Which @angular/* package(s) are the source of the bug?

core

### Is this a regression?

No

### Description

This was already reported before, but not with the intent of making the error message better:

https://github.com/angular/angular/issues/54092

Below, I posted a reproduction that wasn't provided back then.
Note that uncommenting the @defer block will "fix" this.

It's not necessarily trivial to fix these errors. In our case, after migrating from modules to full standalone components, we had such a cycle with a scenario similar to this one:

<user-list> Component renders several <user-name> components.
--> Click <user-name> opens a dialog containing User related data with MatDialog when you click it.

Inside that dialog, we have some sub-component <friend-list> that uses <user-name>, hence the cycle. We had to fix this by importing the dialog only when it's clicked, but finding which of the sub-components was the culprit took quite some time. It would be good if there was at least some indication of what to investigate, since the error message isn't exactly simple.

### Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/8pfsxa?file=src%2Fapp%2Fa.component.ts,src%2Fapp%2Fb.component.ts,src%2Fmain.ts

### Please provide the exception or error you saw
This isn't easy to debug in bigger components as the cycles might be non-obvious.

`forwardRef()` or `defer {}` or delayed imports can all help once you found the culprit, but finding the culprit is painful.

If component A relies on component B, and component B on component A again, we currently get a very cryptic and hard to debug error:

```true
core.mjs:6637 ERROR TypeError: Cannot read properties of undefined (reading 'ɵcmp')
    at getComponentDef (core.mjs:1664:10)
    at extractDirectiveDef (core.mjs:16449:10)
    at core.mjs:16585:96
    at Array.map (<anonymous>)
    at core.mjs:16585:85
    at createTView (core.mjs:12916:59)
    at getOrCreateComponentTView (core.mjs:12865:24)
    at addComponentLogic (core.mjs:13602:17)
    at instantiateAllDirectives (core.mjs:13399:5)
    at createDirectivesInstances (core.mjs:12830:3)
```

### Please provide the environment you discovered this bug in (run `ng version`)

```true
_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 19.0.0
Node: 20.13.1
Package Manager: npm 9.6.4
OS: win32 x64

Angular: 19.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1900.0
@angular-devkit/build-angular   19.0.0
@angular-devkit/core            19.0.0
@angular-devkit/schematics      19.0.0
@schematics/angular             19.0.0
rxjs                            7.8.1
typescript                      5.5.4
zone.js                         0.15.0
```

### Anything else?

It's also interesting to note that WebStorm has a diagnostic for this:
![Image](https://github.com/user-attachments/assets/4762efda-333d-4848-a113-c480f41c4835)