Description
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