Component under @defer can not find injected services - R3InjectorError(DeferBlock Injector) error. #56372
Description
Which @angular/* package(s) are the source of the bug?
core
Is this a regression?
Yes
Description
I'm encountering an issue where the component under @defer block can't achieve injected services in Angular 18.0.2.
However, this issue does not occur when using @if or moving out a component from the @defer { } scope.
unfortunately StackBlitz still buggy and doesn't want to load container with angular v18+, so will provide the example in text here.
Example:
modal root wrapper component for MatDialog:
@Component({
standalone: true,
providers: [BlaBlaService],
selector: 'modal-host',
templateUrl: 'modal-host.component.html',
})
export class ModalHostComponent {
data: IMatDialogData = inject(MAT_DIALOG_DATA);
}
Modal opening:
this.matDialog.open(ModalHostComponent, { ... parentComponent passing here ... })
parent component HTML
@defer (on timer(1s)) { // <-- DOES NOT WORK, returns "R3InjectorError(DeferBlock Injector) NullInjector error for BlaBlaService"
<!-- @if(anyCondition) { --> // <-- WORKS, no error
...
@switch (true) {
@case ...
...
@default {
<!-- defer issue can't load component with its injections -->
<child-component />
}
}
}
parent component TS:
@Component({
standalone: true,
imports: [ChildComponent],
selector: 'app-parent',
templateUrl: 'app-parent.component.html',
})
export class AppParent {}
child: which uses service from modal wrapper component
@Component({
standalone: true,
selector: 'child-component',
template: `child works`
})
export class ChildComponent {
private service = inject(BlaBlaService); // <-- from chain Child -> Parent -> ModalHostComponent (has BlaBlaService)
constructor() {
this.service.doJob();
}
}
Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
ERROR NullInjectorError: R3InjectorError(DeferBlock Injector)[BlaBlaService -> BlaBlaService -> BlaBlaService]:
NullInjectorError: No provider for BlaBlaService!
at NullInjector.get (core.mjs:1659:27)
at R3Injector.get (core.mjs:3105:33)
at R3Injector.get (core.mjs:3105:33)
at R3Injector.get (core.mjs:3105:33)
at lookupTokenUsingModuleInjector (core.mjs:5746:39)
at getOrCreateInjectable (core.mjs:5794:12)
at ɵɵdirectiveInject (core.mjs:11232:19)
at ɵɵinject (core.mjs:1112:60)
at inject (core.mjs:1198:12)
at new ChildComponent
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 18.0.2
Node: 20.10.0
Package Manager: npm 10.2.3
Angular: 18.0.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, platform-server, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1800.2
@angular-devkit/build-angular 18.0.2
@angular-devkit/core 18.0.2
@angular-devkit/schematics 18.0.2
@angular/cli 18.0.2
@angular/ssr 18.0.2
@schematics/angular 18.0.2
ng-packagr 18.0.0
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.6
Anything else?
this issue possibly related to this one, but it is different according to newest version and DeferBlock error naming as possibly implemented. #54117