Animations modules (Browser and Noop) cause strange rendering

[pauldraper]

🐞 bug report

Affected Package

@angular/animation or @angular/platform-browser

Is this a regression?

No.

Description

The BrowserAnimationsModule and NoopAnimationsModule cause incomplete renders where there was none before.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-after-view

When the button is toggled, the ngAfterViewChecked() shows that the DOM from both states are in the DOM simultaneously.

If you remove the NoopAnimationsModule altogether, there is only one state when ngAfterViewChecked() is run.

import { AfterViewChecked, ChangeDetectionStrategy, Component, ElementRef, Injectable, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class LogService {
  private readonly _logs: string[] = [];

  readonly logs = new BehaviorSubject<string[]>(this.logs);

  clear() {
    this._logs.length = 0;
    this.logs.next(this._logs);
  }

  log(log: string) {
    console.log(log);
    this._logs.push(log);
    this.logs.next(this._logs);
  }
}

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app',
  template: `
    <p class="block">Angular {{ version }}</p>
    <container>
      <button class="block" (click)="state = !state" type="button">Toggle content</button>
      <div *ngIf="state" class="block state">On</div>
      <div *ngIf="!state" class="block state">Off</div>
    </container>
    <log></log>
  `,
})
export class AppComponent {
  readonly version = VERSION.full;
  state = false;
}

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'container',
  template: `
    <ng-content></ng-content>
  `,
})
export class ContainerComponent implements AfterViewChecked {
  constructor(private readonly elementRef: ElementRef<HTMLElement>, private readonly logService: LogService) {}

  ngAfterViewChecked() {
    this.logService.log(`${this.elementRef.nativeElement.querySelectorAll('.state').length} states`);
  }
}

@Component({
  selector: 'log',
  styles: [`
    .log:not(:first-child) {
      margin-top: 2px;
    }
    .log:not(:last-child) {
      margin-bottom: 2px;
    }
  `],
  template: `
    <button class="block" (click)="logService.clear()" type="button">Clear logs</button>
    <div class="block log" *ngFor="let log of logService.logs | async">{{ log }}</div>
  `,
})
export class LogComponent {
  constructor(readonly logService: LogService) {}
}

@NgModule({
  declarations: [
    AppComponent,
    ContainerComponent,
    LogComponent,
  ],
  imports: [
    BrowserModule,
    NoopAnimationsModule,
  ],
  bootstrap: [AppComponent],
  providers: [
    LogService,
  ],
})
export class AppModule { }

🌍 Your Environment

Angular Version:

7.1.4

Anything else relevant?

Because of this bug, there is no way (that I'm aware of) to reliably measure the DOM after updating the view but before browser render.

[matsko]

Hello @pauldraper yes the purpose of the animation modules are to enable the DOM to wait until change detection is done to clean up the "removed" elements (this timing gap allows for animation queries to run before an element is removed). This works as intended, but it was never agreed on that ngAfterViewChecked would be a safe place to run these queries (and it's too early to do that).

The best choice you have here to run a requestAnimationFrame call in your ngAfterViewChecked method call and in there measure the DOM.

In later versions of Angular we can look into something like ngOnRender or so.

[pauldraper]

it was never agreed on that ngAfterViewChecked would be a safe place to run these queries (and it's too early to do that)

There's rather little information about the details of ngAfterViewChecked() gets calls and what it's actually good for.

The best choice you have here to run a requestAnimationFrame

Does Angular already run in requestAnimationFrame? If so, another call to it would cause browser render first, before running my code. (And I want code to run in between view update and browser render.)

In later versions of Angular we can look into something like ngOnRender or so.

I agree that something is needed for this dirty but IMO fairly common task: measure DOM to animate it, adjust it, etc.

I found a workaround in NgZone.onStable

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'container',
  template: `
    <ng-content></ng-content>
  `,
})
export class ContainerComponent implements AfterViewChecked {
  private stable: Subscription;

  constructor(
    private readonly elementRef: ElementRef<HTMLElement>,
    private readonly logService: LogService,
    private readonly zone: NgZone) {}

  ngAfterViewChecked() {
    if (!this.stable) {
      this.stable = this.zone.onStable.subscribe(() => {
        this.stable.unsubscribe();
        this.stable = undefined;
        const states = this.elementRef.nativeElement.querySelectorAll('.state').length;
        this.logService.log(`${states} states`);
      });
    }
  }
}

Perhaps this is wrong too, but it at least works in the example case. https://stackblitz.com/edit/angular-after-view-2

[angular-automatic-lock-bot]

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