forwardRef Not Working with hostDirectives #58485

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

compiler

Is this a regression?

No

Description

Not really sure it is a bug or a feature request.

for short:

@Component({
  hostDirectives: [forwardRef(() => ChildDirective)] // <-------------------- THIS NOT WORK !!!
})

will get this error.

Step by step reproduction:

This is AppComponent

import { Component } from '@angular/core';
import { ParentComponent } from './parent.component';
import { ChildDirective } from './child.directive';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <app-parent />
    <p appChild>app works!</p>
  `,
  imports: [ParentComponent, ChildDirective],
})
export class AppComponent {}

App imported Parent and Child.

This is ChildDirective.

import { Directive, inject } from '@angular/core';
import { ParentComponent } from './parent.component';

@Directive({
  selector: '[appChild]',
  standalone: true
})
export class ChildDirective {
  constructor() { 
    console.log(inject(ParentComponent, { optional: true, self: true }));
  }
}

Child imported Parent.

This is ParentComponent

@Component({
  selector: 'app-parent',
  template: `<p>parent works!</p>`,
  standalone: true,
  hostDirectives: [ChildDirective]
})
export class ParentComponent {}

Parent imported Child (Circular References)

Test run... ng serve --open

so far everything good.

Switch the import of ChildDirective to appear before ParentComponent

error came

it is not surprise, because we have Circular References.

try apply forwardRef

@Component({
  selector: 'app-parent',
  template: `<p>parent works!</p>`,
  standalone: true,
  hostDirectives: [forwardRef(() => ChildDirective)] // <-- like this
})
export class ParentComponent {}

same error...

Check out the source code

manual compile
yarn run ngc -p tsconfig.json

Looking at the source code, Angular seems to handle forwardRef, but the whole process is indeed executed in a synchronous context.
Compare to imports + forwardRef
imports: [forwardRef(() => ChildDirective)]
the code handle it in asynchronous context

so, I am not sure it is a bug or by design?

Please provide a link to a minimal reproduction of the bug

https://github.com/keatkeat87/host-directives-forward-ref-issue

Please provide the exception or error you saw

Uncaught TypeError: Cannot read properties of undefined (reading 'directive')

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

Angular CLI: 19.0.0-rc.0
Node: 20.18.0
Package Manager: yarn 1.22.19
OS: win32 x64

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

Package Version

@angular-devkit/architect 0.1900.0-rc.0
@angular-devkit/build-angular 19.0.0-rc.0
@angular-devkit/core 19.0.0-rc.0
@angular-devkit/schematics 19.0.0-rc.0
@schematics/angular 19.0.0-rc.0
rxjs 7.8.1
typescript 5.6.3
zone.js 0.15.0

Anything else?

No response