Skip to content

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

@msmallest

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.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions