ExpressionChangedAfterItHasBeenCheckedError in Dynamic component loader sample

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

Unknown

Description

I was trying to implement something similar to the sample here: https://angular.io/guide/dynamic-component-loader And keept running into a ExpressionChangedAfterItHasBeenCheckedError and could not figure out what I did wrong.

I finally realized that the Sample it self throws this very same error.

Not sure if this is classified as a Documentation defect or an Angular defect, I am guessing the former but not sure. Is there a way to get around this error?

Please provide a link to a minimal reproduction of the bug

https://angular.io/generated/live-examples/dynamic-component-loader/stackblitz.html

Please provide the exception or error you saw

vendor.js:20510 ERROR Error: NG0100: 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?. Find more at https://angular.io/errors/NG0100
    at throwErrorIfNoChangesMode (vendor.js:20758:11)
    at bindingUpdated (vendor.js:26744:17)
    at interpolation1 (vendor.js:26851:23)
    at ɵɵtextInterpolate1 (vendor.js:31194:26)
    at Module.ɵɵtextInterpolate (vendor.js:31170:5)
    at HeroProfileComponent_Template (main.js:288:72)
    at executeTemplate (vendor.js:23642:9)
    at refreshView (vendor.js:23508:13)
    at refreshComponent (vendor.js:24679:13)
    at refreshChildComponents (vendor.js:23304:9)

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 13.1.4
Node: 14.16.0
Package Manager: npm 7.17.0
OS: linux x64

Angular: 13.1.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.4
@angular-devkit/build-angular   13.1.4
@angular-devkit/core            13.1.4
@angular-devkit/schematics      13.1.4
@angular/cli                    13.1.4
@schematics/angular             13.1.4
rxjs                            7.4.0
typescript                      4.5.5

Anything else?

No response

[AlirezaEbrahimkhani]

@AndrewKushnir Hi ! I can fix this error in 3 different ways which would you prefer me to do ?

1. change the angular lifecycle method from ngAfterViewInit to ngOnInit
2. put the statements that cause errors inside setTimeout to angular detect the changes on next browser microtask
3. manually run change detection by calling detectChanges method

I prefer the first

[angular-automatic-lock-bot[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.}