Angular 21

Update to update 21

By no means an extensive evaluation, but in my attempt to use it with v21, the main issue I'm hitting is Uncaught Error: NG0101: ApplicationRef.tick is called recursively thrown, and mainly when providing keyboard input.

Some debugging shows it's coming from waitForWrapper:

angular-testing-library/projects/testing-library/src/lib/testing-library.ts

Line 592 in d4d4567

tick(0);

I'm still on zoned change detection (using provideZoneChangeDetection()).

I didn't encounter any issue with tick, probably because the application is zoneless.

A minor change that I am noticing with respect to routing is that the render promise of components with routes now resolves before an initial redirect completes.

Interesting finding with the new vitest which is default in Angular v21 is how configureTestingModule works with non-standalone components: angular/angular#66007 angular/angular#65665

It means that the current implementation of WrapperComponent for inline-template tests won't work as expected since it's not a standalone component.

Probably we should think about migrating this to standalone with this update.

Interesting finding with the new vitest which is default in Angular v21 is how configureTestingModule works with non-standalone components: angular/angular#66007 angular/angular#65665

It means that the current implementation of WrapperComponent for inline-template tests won't work as expected since it's not a standalone component.

Probably we should think about migrating this to standalone with this update.

Yea, I agree. This should become the default in v21.

I'm working on a new release, feel free to try it out as @testing-library/angular@beta and provide some feedback here.

If you encounter any issues, please provide a reproduction - or a test case in this repo on the beta branch.

More info can be found at https://github.com/testing-library/angular-testing-library/releases or #559

@rdamazio

By no means an extensive evaluation, but in my attempt to use it with v21, the main issue I'm hitting is Uncaught Error: NG0101: ApplicationRef.tick is called recursively thrown, and mainly when providing keyboard input.

Some debugging shows it's coming from waitForWrapper:

angular-testing-library/projects/testing-library/src/lib/testing-library.ts

Line 592 in d4d4567

tick(0);
I'm still on zoned change detection (using provideZoneChangeDetection()).

@rdamazio I'm unable to reproduce this, can you provide an example please?

@dzonatan

Interesting finding with the new vitest which is default in Angular v21 is how configureTestingModule works with non-standalone components: angular/angular#66007 angular/angular#65665

It means that the current implementation of WrapperComponent for inline-template tests won't work as expected since it's not a standalone component.

Probably we should think about migrating this to standalone with this update.

@dzonatan can you provide an example please? I'm not encountering any issues with declaring the wrapping component as standalone: false. Funny enough I do get errors when I change this to true.

this is nuts. I was having issues when trying to migrate some bigger project to vitest but now I can't come up with a simple failing test case by using testing-library. I'll have to dig in my git-stash to remember what was the cause then.. this may take time.

But the reason why this doesn't work:

it('should create', async () => {
  @Component({
    standalone: false,
    selector: 'wrapper',
    template: '<comp-a />',
  })
  class WrapperComponent {}

  @Component({
    standalone: true,
    selector: 'comp-a',
    template: `Component A`,
  })
  class ComponentA {}

  TestBed.configureTestingModule({
    imports: [ComponentA],
    declarations: [WrapperComponent],
  });
  TestBed.createComponent(WrapperComponent);
  expect(screen.getByText('Component A')).toBeTruthy();
});

But this works:

it('should create', async () => {
  @Component({
    standalone: true,
    selector: 'comp-a',
    template: `Component A`,
  })
  class ComponentA {}

  await render(`<comp-a />`, { imports: [ComponentA] });
  expect(screen.getByText('Component A')).toBeTruthy();
});

seems to be the fact that Wrapper in render starts with an empty template and then is set through overrideTemplate:

it('should create', async () => {
  @Component({
    standalone: false,
    selector: 'wrapper',
    template: '', // <-- this passes
    //template: '<comp-a />', // <-- this fails
  })
  class WrapperComponent {}

  @Component({
    standalone: true,
    selector: 'comp-a',
    template: `Component A`,
  })
  class ComponentA {}

  TestBed.overrideTemplate(WrapperComponent, `<comp-a />`);
  TestBed.configureTestingModule({
    imports: [ComponentA],
    declarations: [WrapperComponent],
  });
  TestBed.createComponent(WrapperComponent);
  expect(screen.getByText('Component A')).toBeTruthy();
});

This probably doesn't help much but at least that's what I found for now.

@dzonatan

Thanks for the update and the investigation @dzonatan ! I was also looking at why it can't be a standalone component, but I couldn't figure it out.

🎉 This issue has been resolved in version 19.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Navigation Menu

Repository navigation

Angular 21 #554

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Angular 21 #554

Description

Activity

rdamazio commented on Nov 26, 2025

ThiloAschebrock commented on Dec 8, 2025

dzonatan commented on Dec 12, 2025

timdeschryver commented on Dec 12, 2025

timdeschryver commented on Dec 16, 2025

timdeschryver commented on Dec 16, 2025

timdeschryver commented on Dec 16, 2025

dzonatan commented on Dec 17, 2025

timdeschryver commented on Dec 18, 2025

github-actions commented on Jan 5, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions