Angular dynamic component loading - ExpressionChangedAfterItHasBeenCheckedError

Question

I need to create instances of multiple components dynamically on the run.

I found several examples on the internet, including StackOverflow and angular.io page itself.

But always receiving exception ExpressionChangedAfterItHasBeenCheckedError when I'm assigning a value to the component model.

Even the dedicated example for this functionality throws the same exception: Angular.io article Plunker

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'Bombasto'. 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 ?

Should I just ignore this or it can/should be fixed?

this is newbie error :). don't change the state of the component manually after it was already checked. See stackoverflow.com/q/34364880/573032 — Roman C
– Roman C, Commented May 11, 2017 at 14:22
thx guys, will have a look on it. Rusev solved the actual bug — Václav Mikeska
– Václav Mikeska, Commented May 11, 2017 at 14:48
Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error explains this behavior in great details — Max Koretskyi
– Max Koretskyi, Commented Jul 2, 2017 at 5:24

Frederik Struck-Schøning · Accepted Answer · 2019-03-28 11:00:53Z

10

This is because you are altering component state in ngAfterViewInit. See the issue here discussing the behavior.

In your case you can move the initial creating in ngOnInit.

 ngOnInit() {
    this.loadComponent();
    this.getAds();
 }

https://plnkr.co/edit/vAbkBIqrhpuuWadO4zGD?p=preview

edited Mar 28, 2019 at 11:00

Frederik Struck-Schøning

13.3k9 gold badges63 silver badges70 bronze badges

answered May 11, 2017 at 14:25

rusev

1,9302 gold badges18 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Václav Mikeska Over a year ago

Many thanks, this solved issue. Didn't expected bug directly in Angular docs on such a key functionality

rusev Over a year ago

Actually it is not a bug, but a intended behavior - very annoying one :).

Matthias Herrmann Over a year ago

Currently the official example about dynamic component loading contains that error angular.io/generated/live-examples/dynamic-component-loader/… - this solution applies to that as well

Bart Verkoeijen Over a year ago

This article shows another method using async update with a microtask: indepth.dev/…

Frederik Struck-Schøning · Accepted Answer · 2019-03-28 11:01:27Z

5

In the more general case

use

this._changeDetectionRef.detectChanges();

at the end of the method that did update to late the component state,

... not forgetting to add

private _changeDetectionRef : ChangeDetectorRef

as parameter of the constructor of the Component owning your method.

See discution here

edited Mar 28, 2019 at 11:01

Frederik Struck-Schøning

13.3k9 gold badges63 silver badges70 bronze badges

answered Nov 5, 2017 at 20:19

user1767316

3,7233 gold badges44 silver badges52 bronze badges

Collectives™ on Stack Overflow

Angular dynamic component loading - ExpressionChangedAfterItHasBeenCheckedError

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related