bug(HMR): NgFor/AsyncPipe break in module components when template/style reload occurs from that component #59639
Description
Which @angular/* package(s) are the source of the bug?
platform-browser, common
Is this a regression?
Yes
Description
In a module based application, HMR reloads that occur after saving the template or style in a component declared in a module cause errors related to NgFor/AsyncPipe.
While my reproduction gets these from BrowserModule, I originally observed the errors in a real application with both BrowserModule in the AppModule as well as the trouble component being declared in a different module that included CommonModule.
- This seems to be module specific, or down to perhaps
BrowserModule. When I ran the standalone schematic with "Convert all components, directive and pipes to standalone" + "./" path, this error no longer occurred. - This is definitely HMR related though. In both branches, I ran it with HMR on by default, and then with
--hmr false. Of the four permutations, only the module declared component version with HMR on gave any issues. - When I changed the template or style of
app-rootwhich contains the module component (app-authorized-users), there is no issue. Only when editingapp-authorized-users's template is there an issue. - edit: I did not try other variants such as one external file and one inline file in either scenario, but I assume the same
About the repo in general, and the two relevant branches:
- This issue's repro repo was generated using Angular CLI version 19.1.1, using the command
ng new module-based-hmr --standalone false - ...and then bumped to latest patch versions.
- Each branch has a relevant
README.mdwith details, including reproducing with or without HMR. - The trouble component (
app-authorized-users) is embedded in theapp-root.
https://github.com/msmallest/module-based-hmr (has errors listed for both the NgFor and AsyncPipe)
https://github.com/msmallest/module-based-hmr/tree/module-root-standalone-component-no-errors (has the output of the migration)
Please provide a link to a minimal reproduction of the bug
https://github.com/msmallest/module-based-hmr
Please provide the exception or error you saw
authorized-users.component.ts:34 NG0303: Can't bind to 'ngForOf' since it isn't a known property of 'ng-container' (used in the '_AuthorizedUsersComponent' component template).
1. If 'ng-container' is an Angular component and it has the 'ngForOf' input, then verify that it is a part of an @NgModule where this component is declared.
2. If 'ng-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
AuthorizedUsersComponent_Template @ authorized-users.component.ts:34
(anonymous) @ authorized-users.component.ts:12
Promise.then
AuthorizedUsersComponent_HmrLoad @ authorized-users.component.ts:12
(anonymous) @ authorized-users.component.ts:12
(anonymous) @ client:129
notifyListeners @ client:129
notifyListeners @ client:959
handleMessage @ client:904
onMessage @ client:298
(anonymous) @ client:428
authorized-users.component.ts:12 ERROR TypeError: Cannot read properties of null (reading 'pure')
at AuthorizedUsersComponent_Template (authorized-users.component.ts:36:43)
(anonymous) @ authorized-users.component.ts:12
Promise.then
AuthorizedUsersComponent_HmrLoad @ authorized-users.component.ts:12
(anonymous) @ authorized-users.component.ts:12
(anonymous) @ client:129
notifyListeners @ client:129
notifyListeners @ client:959
handleMessage @ client:904
onMessage @ client:298
(anonymous) @ client:428
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 19.1.3
Node: 20.11.1
Package Manager: npm 10.2.4
OS: darwin arm64
Angular: 19.1.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1901.3
@angular-devkit/build-angular 19.1.3
@angular-devkit/core 19.1.3
@angular-devkit/schematics 19.1.3
@angular/cli 19.1.3
@schematics/angular 19.1.3
rxjs 7.8.1
typescript 5.7.3
zone.js 0.15.0
Anything else?
There is another issue seemingly related to HMR and modules that I am writing up now. edit: #59640