Thanks to visit codestin.com
Credit goes to github.com

Skip to content

forwardRef Not Working with hostDirectives #58485

Closed
@keatkeat87

Description

@keatkeat87

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.

Image

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
Image
so far everything good.

Switch the import of ChildDirective to appear before ParentComponent

Image
error came
Image
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

Image

Image

Image

Image

Image

Image

Image

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

Image

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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions