Generated HMR metadata update function doesn't include proper imports when using defer blocks #59310
Description
Which @angular/* package(s) are the source of the bug?
compiler
Is this a regression?
Yes
Description
When enabling HMR/Live Reload, if a defer block is used, an error is logged to the console after saving the component template.
Steps to reproduce
- Clone repo and run
npm install - Run
ng serve - Open Browser Devtools
- Make a change to
app.component.htmland save. - Note error in browser devtools, and "lazy works" disappears.
Please provide a link to a minimal reproduction of the bug
https://github.com/brandonroberts/angular-hmr-defer
Please provide the exception or error you saw
Uncaught ReferenceError: LazyComponent is not defined
at AppComponent_Defer_8_DepsFn (app.component.ts:1:157)
at triggerResourceLoading (chunk-L7E6HT6X.js?v=287274a3:19516:48)
at triggerDeferBlock (chunk-L7E6HT6X.js?v=287274a3:19586:7)
at chunk-L7E6HT6X.js?v=287274a3:19458:38
at callback (chunk-L7E6HT6X.js?v=287274a3:17478:9)
at _ZoneDelegate.invoke (zone.js:369:28)
at Object.onInvoke (chunk-L7E6HT6X.js?v=287274a3:8569:25)
at _ZoneDelegate.invoke (zone.js:368:34)
at ZoneImpl.run (zone.js:111:43)
at _NgZone.run (chunk-L7E6HT6X.js?v=287274a3:8450:24)
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 19.1.0-next.2
Node: 22.5.1
Package Manager: npm 10.8.2
OS: darwin arm64
Angular: 19.1.0-next.4
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1901.0-next.2
@angular-devkit/build-angular 19.1.0-next.2
@angular-devkit/core 19.1.0-next.2
@angular-devkit/schematics 19.1.0-next.2
@angular/cli 19.1.0-next.2
@angular/ssr 19.1.0-next.2
@schematics/angular 19.1.0-next.2
rxjs 7.8.1
typescript 5.7.2
zone.js 0.15.0
Anything else?
Generated HMR update metadata function
export default function AppComponent_UpdateMetadata(AppComponent, ɵɵnamespaces) {
const ɵhmr0 = ɵɵnamespaces[0];
const AppComponent_Defer_8_DepsFn = () => [LazyComponent]; // <-- error
function AppComponent_Defer_7_Template(rf, ctx) {
if (rf & 1) {
ɵhmr0.ɵɵelement(0, "app-lazy");
}
}
AppComponent.ɵfac = function AppComponent_Factory(__ngFactoryType__) {
return new (__ngFactoryType__ || AppComponent)();
}
;
AppComponent.ɵcmp = /*@__PURE__*/
ɵhmr0.ɵɵdefineComponent({
type: AppComponent,
selectors: [["app-root"]],
features: [ɵhmr0.ɵɵExternalStylesFeature(["8911acd770bdc9e6b98613f574402426119ebd7d17ab3a9642918dbc80f2ddda.css"])],
decls: 10,
vars: 0,
template: function AppComponent_Template(rf, ctx) {
if (rf & 1) {
ɵhmr0.ɵɵelementStart(0, "ol")(1, "li");
ɵhmr0.ɵɵtext(2, " Open Browser Devtools ");
ɵhmr0.ɵɵelementEnd();
ɵhmr0.ɵɵelementStart(3, "li");
ɵhmr0.ɵɵtext(4, " Make a change to app.component.html and save. ");
ɵhmr0.ɵɵelementEnd();
ɵhmr0.ɵɵelementStart(5, "li");
ɵhmr0.ɵɵtext(6, " Note error in browser devtools, and \"lazy works\" disappears. ");
ɵhmr0.ɵɵelementEnd()();
ɵhmr0.ɵɵtemplate(7, AppComponent_Defer_7_Template, 1, 0);
ɵhmr0.ɵɵdefer(8, 7, AppComponent_Defer_8_DepsFn);
ɵhmr0.ɵɵdeferOnIdle();
}
}
});
( () => {
(typeof ngDevMode === "undefined" || ngDevMode) && ɵhmr0.ɵsetClassDebugInfo(AppComponent, {
className: "AppComponent",
filePath: "src/app/app.component.ts",
lineNumber: 10
});
}
)();
}