javascriptangulartoastr

ExpressionChangedAfterItHasBeenCheckedError Explained in toastr Angular

I am getting errors. This only seems to happen when a toast is created automatically on load. Most likely because not everything is loaded yet?

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'toast-success toast'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?
at viewDebugError (core.es5.js:8420)
at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8398)
at checkBindingNoChanges (core.es5.js:8562)
at checkNoChangesNodeInline (core.es5.js:12423)
at checkNoChangesNode (core.es5.js:12397)
at debugCheckNoChangesNode (core.es5.js:13174)
at debugCheckRenderNodeFn (core.es5.js:13114)
at Object.eval [as updateRenderer] (Toast_Host.html:1)
at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13096)
at checkNoChangesView (core.es5.js:12219)

import { ToastrService } from 'ngx-toastr';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';

  constructor(private toastr: ToastrService) { }

  public ngOnInit(): void {
    this.toastr.success("testing", "testing");
  }
}
Solution

  • Probably related to https://github.com/angular/components/issues/5268 call it inside a setTimeout().

    ngOnInit() {
    setTimeout(() => this.toastr.success("testing", "testing"))
}