Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Lazy loading causes ExpressionChangedAfterItHasBeenCheckedError (NG-ZORRO?)

See original GitHub issue

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
    // 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

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]="">

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

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:11 (5 by maintainers)

github_iconTop GitHub Comments

zakhenrycommented, Mar 19, 2019

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

lppeddcommented, Mar 19, 2019

@maxime1992 I’ve created a new repository here 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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

ng-zorro cascader lazy load data, nzLoadData function got ...
The reason is that: When you pass loadCityBuildingData to nzLoadData , loadCityBuildData becomes a property of NzCascaderComponent .
Read more >
Tabs - NG-ZORRO - Angular UI component library
By default, the contents in nz-tab are eagerly loaded. Tab contents can be lazy loaded by declaring the body in a ng-template with...
Read more >
Table | NG-ZORRO - Ant Design
import { NzTableModule } from 'ng-zorro-antd/table'; ... [nzLoadingDelay], Specifies a delay in milliseconds for loading state (prevents flush), number, 0.
Read more >
Tabs | NG-ZORRO - Ant Design
import { NzTabsModule } from 'ng-zorro-antd/tabs'; ... Tab contents can be lazy loaded by declaring the body in a ng-template with the [nz-tab]...
Read more > · Gitee 极速下载/ng-zorro -
NG -ZORRO 是 Ant Design 的 Angular 4.0 实现,开发和服务于企业级后台产品. ... message: fix lazy load problem (#3797) (679fdea), closes #3794 ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found