Skip to content

bug(HMR): TS classes in addition to component class cause app reloads despite HMR enabled #62782

@michael-small

Description

@michael-small

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

When a change is made to HTML/CSS in a client-side rendered project with HMR enabled, the app will be reloaded fully under most scenarios where there is a class declared in addition to a component's class.

Example:

import { Component } from '@angular/core';

class CommentMeInOrOut {}

@Component({
  selector: 'app-class-above',
  template: `
    <p>
        App will reload on template or style change, if CommentMeInOrOut is left in.
        If commented out or removed entirely, HMR works fine. 
        Same in *most* permutations of inline or external file templates/styles.
    </p>
  `,
  styles: `
    p {
      color: green;
    }
  `,
})
export class ClassAbove {}

If the additional class is commented out, then HMR works fine.

EXCEPTION: There seems to be a notable exception for external template files. When an external template is changed, HMR works like intended and does not cause full application reload. I marked those two templates with a star emoji in the templates.

About the reproduction Stackblitz:

  • A counter goes up by 1 for every second without an application reload
  • I made a bunch of components with different permeations of inline or external file templates/styles.
  • Control: One example has no extra class, not even commented out. This works as intended and like the other examples when the extra class is commented out or removed.
  • One example has a component with inline template/styles and then another component class which is used in the template of that file's component. If the inline templates/styles of either are changed, the whole app reloads.
  • edit: with default change detection and using Zone. Unsure if those would change anything but I have done so many permutations already. Though that said, in the v19.1.4 project I found this in, the zone project using OnPush change detection had the same issues as this repro's equivalent.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-sct51wue?file=src%2Fmain.ts

Please provide the exception or error you saw


Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 20.1.2
Node: 20.19.1
Package Manager: npm 10.8.2
OS: linux x64

Angular: 20.1.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.2001.2
@angular-devkit/core         20.1.2
@angular-devkit/schematics   20.1.2
@angular/build               20.1.2
@angular/cli                 20.1.2
@schematics/angular          20.1.2
rxjs                         7.8.2
typescript                   5.8.2
zone.js                      0.15.0

Anything else?

I initially observed this in a v19.1.4 common / 19.1.5 build project. I did not test all these permutations in that one though.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: coreIssues related to the framework runtime

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      pFad - Phonifier reborn

      Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

      Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


      Alternative Proxies:

      Alternative Proxy

      pFad Proxy

      pFad v3 Proxy

      pFad v4 Proxy