oh, the same issue (angular 9.1.7 with { ngZone: ‘noop’ })

resolved it by moving logic out of constructor to ngOnInit

@BzenkoSergey It worked! You are a champ!

Looked through my company’s project for ALL logic defined in components constructors, and moved anything I found to ngOnInit, and bam, no error.

Temporary fix for me: replace call detectChanges() to markForCheck().

same problem. any updates?

Please provide minimal reproduction with exact steps on how to reproduce it. We have limited time and can’t go explore your application.

I use setTimeout(() => this.changeDetector.detectChanges(), 0);

A typical scenario, where this error occurs is something along those lines:

    @Input()
    public set readonly(value: boolean) {
        // somewhere in other function:
        this.changeDetectorRef.detectChanges();
    }

Basically we are invoking an input setter in the creation mode (this might happen if an input is set from a static attribute). 2 possible solutions here:

• ignore CD calls in creation mode (most of the time we will have update pass anyway);
• more directive inputs setting (from static atrs) to the update mode (?)

In Angular 12 this is happening even when not in a constructor. Simply calling .detectChanges() in an observable that, I don’t know…initially runs too early and fast?, throws this error. Constructor has nothing in the body.

This error appeared when I was calling detectChanges() in the constructor after subscribing to some data. I moved the subscription and detectChanges() to ngOnInit() instead and it disappeared.

oh, the same issue (angular 9.1.7 with { ngZone: ‘noop’ })

resolved it by moving logic out of constructor to ngOnInit

I believe this is bad practice to have some logic within constructor in any case. But yeah, worked for me.

Any update on this?

PR is still open https://github.com/angular/angular/pull/33463

This breaks a big chunk of our application, any updates on this issue?

Same issue here. I experienced the issue using this.changeDetectorRef.detectChanges() in a sync operation.

Some background: I’m building an Electron Application using Angular 9.0.6 + Electron 8 + @angular-guru/electron-builder (as builder)

Using the code below triggers the error:

import { execSync } from 'child_process';
import { ChangeDetectorRef, Component } from '@angular/core';
// ... code to construct component
constructor(private changeDetectorRef: ChangeDetectorRef) {
 
 const data = execSync(`some command line executable`);
 this._init(JSON.parse(data.toString('utf8')));
}

private _init(data) {
  // some processing with data 
  this.changeDetectorRef.detectChanges(); // this line throws the error
} 

Removing that line, or changing to as below, solved my problem:

import { exec } from 'child_process';
import { ChangeDetectorRef, Component } from '@angular/core';
// ... code to construct component
constructor(private changeDetectorRef: ChangeDetectorRef) {
  exec(`some command line executable`, (data) => {
    this._init(JSON.parse(data));
  });
}

private _init(data: Button[]) {
  // some processing
  this.changeDetectorRef.detectChanges();
}

Hope this could be helpful for someone. My environment:

Angular CLI: 9.0.6
Node: 12.16.1
OS: win32 x64

Angular: 9.0.6
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.6
@angular-devkit/build-angular     0.900.6
@angular-devkit/build-optimizer   0.900.6
@angular-devkit/build-webpack     0.900.6
@angular-devkit/core              9.0.6
@angular-devkit/schematics        9.0.6
@angular/cdk                      9.1.2
@ngtools/webpack                  9.0.6
@schematics/angular               9.0.6
@schematics/update                0.900.6
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2