bug(HMR): removing components selectors from a template causes inconsistent behavior with other components in template · Issue #59581 · angular/angular · GitHub
Skip to content

bug(HMR): removing components selectors from a template causes inconsistent behavior with other components in template #59581

Closed

Description

@msmallest

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

Don't known / other

Is this a regression?

Yes

Description

Commenting out or entirely removing a component selector (<app-thing />) causes odd behavior.

Take the following example, and imagine I just did ng serve in a fresh CLI generated (19.1.1) app, which had components a/b/c generated as inline template and inline style with the default <p>a works!</p> and so on.

@Component({
  selector: 'app-root',
  // templateUrl: './app.component.html', // also applies to external
  template: `
    <app-a />
    <app-b />
    <app-c />

    {{version.full}}
  `,
  styleUrl: './app.component.scss',
  imports: [AComponent, BComponent, CComponent],
})
export class AppComponent {
    version = VERSION;
}

If I removed <app-a />, the view now only shows the template of <app-b /> and the version. However, this is the rendered body of <app-root>, using either file-based or inline template:

<app-root ng-version="19.1.1"><app-b><p> b works! </p></app-b><app-c></app-c> 19.1.1 </app-root>

Other variants

Removing <app-b />

<app-root ng-version="19.1.1"><app-a><p> a works! </p></app-a><app-c></app-c> 19.1.1</app-root>

Removing <app-c />

<app-root ng-version="19.1.1"><app-a><p> a works! </p></app-a><app-b><p> b works! </p></app-b> 19.1.1</app-root>

Trends:

  • When removing A or B, C's host element stays but is empty. But when removing C, A and B properly render and there is no C.
  • Not really an issue with non component HTML elements, such as a <p>stuff</p> tag in the <app-root /> template. And the untagged full version I had for my reference was also fine. However, components still are spotty like above when removed and in the same template as primitive elements or text (edited: clarify).

Please provide a link to a minimal reproduction of the bug

https://github.com/msmallest/hmr-issue-multiple-components

Please provide the exception or error you saw


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

Angular CLI: 19.1.1
Node: 20.11.1
Package Manager: npm 10.2.4
OS: darwin arm64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1901.1
@angular-devkit/build-angular   19.1.1
@angular-devkit/core            19.1.1
@angular-devkit/schematics      19.1.1
@schematics/angular             19.1.1
rxjs                            7.8.1
typescript                      5.7.3
zone.js                         0.15.0

Anything else?

My reproduction has 3 branches.

  • main aka CLI generated with a 19.1.1 global
  • 19.1.1 aka I bumped main with the actual latest in the package.json
  • nightlies-19.1.1+ that points at all the nightlies (edit: and resolved with --force).

My examples I pasted were from main. I observed the same view behavior in 19.1.1 as main but did not check for the exact DOM in 19.1.1. Same story for the nightly but the DOM did look the same at a glance, including the strange C behavior.

Additionally, I didn't look as close as in this reproduction, but the end behavior I initially observed in a large vanilla Angular workspace monorepo of module based apps that I got to what resolves to 19.1.1 for @angular/core.

Activity

  1. modified the milestone: needsTriage on Jan 17, 2025
  2. self-assigned this
    on Jan 17, 2025
  3. added a commit that references this issue on Jan 20, 2025
    95a05bb
  4. added a commit that references this issue on Jan 20, 2025
    f9b13e4
  5. added a commit that references this issue on Feb 7, 2025
    a07b9bb
  6. angular-automatic-lock-bot commented on Feb 20, 2025

    @angular-automatic-lock-bot

    This issue has been automatically locked due to inactivity.
    Please file a new issue if you are encountering a similar or related problem.

    Read more about our automatic conversation locking policy.

    This action has been performed automatically by a bot.

  7. locked and limited conversation to collaborators on Feb 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions