Many NG0100 errors in Karma unit tests after updating to Angular 21

Command

test

Is this a regression?

Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

20.3.12

Description

When updating my app to Angular 21, all is fine, except my unit tests. There are now many, many occurrences of the NG0100: ExpressionChangedAfterItHasBeenCheckedError, which were not present before the update.

My app still heavily relies on zone.js for change detection. I also still use the older @angular-devkit/build-angular:karma builder. I am working on upgrading both, but that process is gradual and will still take significant effort.

I discovered this Reddit post where someone describes the exact same issue (in way more detail). This also includes a workaround: globally "patch" TestBed.configureTestingModule to always provideZoneChangeDetection(). As I also indicated in my comment over there, this does work, but feels too hacky and I cannot imagine this being the "official" recommended solution. Is there anything else I can do?

Minimal Reproduction

In principle:

Have a zone.js-based Angular project, not using OnPush change detection (at least not everywhere)
Run ng test
Observe NG0100 errors

I am unfortunately unable to submit (parts of) my actual source code. Will try to see if I can make a minimal reproduction later.

Exception or Error

NG0100: ExpressionChangedAfterItHasBeenCheckedError

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI       : 21.0.1
Angular           : 21.0.2
Node.js           : 24.11.0
Package Manager   : yarn 4.12.0
Operating System  : darwin arm64

┌────────────────────────────────────┬───────────────────┬───────────────────┐
│ Package                            │ Installed Version │ Requested Version │
├────────────────────────────────────┼───────────────────┼───────────────────┤
│ @angular-devkit/architect          │ 0.2100.1          │ 0.2100.1          │
│ @angular-devkit/build-angular      │ 21.0.1            │ 21.0.1            │
│ @angular-devkit/core               │ 21.0.1            │ 21.0.1            │
│ @angular-devkit/schematics         │ 21.0.1            │ 21.0.1            │
│ @angular/animations                │ 21.0.2            │ 21.0.2            │
│ @angular/cdk                       │ 21.0.1            │ 21.0.1            │
│ @angular/cli                       │ 21.0.1            │ 21.0.1            │
│ @angular/common                    │ 21.0.2            │ 21.0.2            │
│ @angular/compiler                  │ 21.0.2            │ 21.0.2            │
│ @angular/compiler-cli              │ 21.0.2            │ 21.0.2            │
│ @angular/core                      │ 21.0.2            │ 21.0.2            │
│ @angular/forms                     │ 21.0.2            │ 21.0.2            │
│ @angular/language-service          │ 21.0.2            │ 21.0.2            │
│ @angular/material                  │ 21.0.1            │ 21.0.1            │
│ @angular/material-date-fns-adapter │ 21.0.1            │ 21.0.1            │
│ @angular/platform-browser          │ 21.0.2            │ 21.0.2            │
│ @angular/platform-browser-dynamic  │ 21.0.2            │ 21.0.2            │
│ @angular/router                    │ 21.0.2            │ 21.0.2            │
│ rxjs                               │ 7.8.2             │ 7.8.2             │
│ typescript                         │ 5.9.3             │ 5.9.3             │
│ zone.js                            │ 0.15.1            │ 0.15.1            │
└────────────────────────────────────┴───────────────────┴───────────────────┘

Anything else relevant?

No response

I have the same issue and I posted it on Stack Overflow.

As a workaround, I have added a @NgModule to my test.ts and added provideZoneChangeDetection() to the providers, for me this works.

@jimivdw

@jimivdw, in the case you have a custom test.ts file you do need to add provideZoneChangeDetection as suggested above.

This looks like it's missing from the migrations though.

@alan-agius4

@alan-agius4 I do not have any custom test.ts files (removed them all about two years ago as we no longer needed them). I can add them again if needed?

Umm this is strange, as we do configure ‘ provideZoneChangeDetection` when it’s zoneless.

Found the problem, will create a PR shortly.

fix(@angular-devkit/build-angular): conditionally provide Zone.js cha…

Me too but not on unit test, i still relaying on Zone.js and now evrywhere in the app where i use children component or modal i've got the same issues.. i put the two providers provideZoneChangeDetection(),
provideZonelessChangeDetection(), in my app.config.ts but it is worse... sometimes angular do breaking changes, it is hard to maintain and folow the new rules at each updates.

@alan-agius4

@alan-agius4 Today I decided to migrate to the new Angular, where “@angular-devkit/build-angular”: “21.0.3” was installed, and I got this error. The solution from stackOverflow works for me.

I have test.ts.
I also use zone.js. My project is still on AppModule.

This error will occur if you use fixture.detectChanges(); while testing with fakeAsync.

example (just for visual understanding)

@Component({
  template: `
    <div
      [appTypewriter]="text"
      [typingRate]="typingRate"
      [startDelay]="startDelay"
      [isHtml]="isHtml"
    ></div>
  `,
  imports: [TypewriterDirective]
})
class TestComponent {
  readonly directive = viewChild(TypewriterDirective);

  text: string = '';
  typingRate: number = 20;
  startDelay: number = 500;
  isHtml: boolean = false;
}

describe('TypewriterDirective', () => {
  let component: TestComponent;
  let fixture: ComponentFixture<TestComponent>;
  let element: HTMLElement;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [TestComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    element = fixture.debugElement.query(By.directive(TypewriterDirective)).nativeElement;

    fixture.detectChanges();
  });

  afterEach(() => {
    const directive = component.directive();
    if (directive) directive.ngOnDestroy();
  });

  it('handles min typing speed', fakeAsync(() => {
    component.text = 'Test';
    component.typingRate = 0;
    component.startDelay = 0;
    fixture.detectChanges(); /// Raised error

    expect(element.innerHTML).toBe('');

    tick(50);
    const afterFirst = element.innerHTML.length;

    tick(50);
    const afterSecond = element.innerHTML.length;

    expect(afterFirst).toBeGreaterThan(0);
    expect(afterSecond).toBeGreaterThan(afterFirst);

    expect(component.directive().minTypingSpeed).toBe(1);
  }));

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.}

Navigation Menu

Repository navigation

Many NG0100 errors in Karma unit tests after updating to Angular 21 #32047

Command

Is this a regression?

The previous version in which this bug was not present was

Description

Minimal Reproduction

Exception or Error

Your Environment

Anything else relevant?

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Many NG0100 errors in Karma unit tests after updating to Angular 21 #32047

Description

Command

Is this a regression?

The previous version in which this bug was not present was

Description

Minimal Reproduction

Exception or Error

Your Environment

Anything else relevant?

Activity

json-derulo commented on Dec 5, 2025

alan-agius4 commented on Dec 5, 2025

jimivdw commented on Dec 5, 2025

alan-agius4 commented on Dec 5, 2025

alan-agius4 commented on Dec 5, 2025

playanth95978 commented on Dec 17, 2025

Viktor-Ivliev commented on Dec 18, 2025

angular-automatic-lock-bot commented on Jan 18, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions