Lazy loading causes ExpressionChangedAfterItHasBeenCheckedError (NG-ZORRO?)

Even with this workaround, it seems that lazy loading a component doesn’t work. At least that happens when using the NG-ZORRO Tab’s lazy loading mechanism.

this.subscription = this.formGroup.valueChanges
  .pipe(
    // this is required otherwise an `ExpressionChangedAfterItHasBeenCheckedError` will happen
    // this is due to the fact that parent component will define a given state for the form that might
    // be changed once the children are being initialized
    delay(0),

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ‘ng-pristine: true’. Current value: ‘ng-pristine: false’.

Usage example:

<div [formGroup]="formGroup">
  <input [formControlName]="formControlNames.name">

  <div [formArrayName]="formControlNames.families">
    <nz-tabset nzTabPosition="top" nzSize="small" nzType="card">
      <nz-tab *ngFor="let c of families.controls; index as i" [nzTitle]="c.value.name">
        <ng-template nz-tab>  <!--  This -->
          <app-family [formControlName]="i"></app-family>
        </ng-template>
      </nz-tab>
    </nz-tabset>
  </div>
</div>

I’m trying to understand, but with no luck 'til now.

[zakhenry]

@maxime1992 I wonder if this might actually be related to the thing I was talking about regarding not destroying the form item controls when the external value updates? Something to check perhaps.

[lppedd]

@maxime1992 I’ve created a new repository here https://github.com/lppedd/ngx-sub-form-test Just clone and npm install. It is built on this repository, I just modified the provided example and added your FormArray fix.

Hope Ivy will make debugging Angular Core easier too! Switching from debugging Java code to Javascript code has been a major struggle for me.