ComponentRef Change detector doesn't trigger detecting for view #36667

RolginRoman · 2020-04-16T14:14:10Z

🐞 bug report

Affected Package

The issue is caused by package @angular/core

Is this a regression?

Cannot say

Description

Component created by #ComponentFactoryResolver.
ComponentFactoryResolver#createComponent returns ComponentRef that does have changeDetectorRef.
After any changes to component's input by code (not by template) and invocation of such ComponentRef#changeDetectorRef.detectChanges component's view won't be updated.

example from repro: dynamic-wrapper.component.ts#createComponent.

componentRef.changeDetectorRef.detectChanges()

This is root issue.

To testing purposes ChangeDetectorRef was be added to component's constructor and invoked by
consumer of this ComponentFactoryResolver. CDR from component's injector works as expected

example from repro: dynamic-wrapper.component.ts#createComponent

componentRef.instance.cdr.detectChanges()

🔬 Minimal Reproduction

StackBlitz

GitHub repro repository:
https://github.com/RolginRoman/ng-dynamic-components-cdr-repro

🔥 Exception or Error


No exception

🌍 Your Environment

Angular Version:



 Angular version 9.1.0

Anything else relevant?

Seems like browser, OS version or anything else doesn't matter

The text was updated successfully, but these errors were encountered:

pkozlowski-opensource · 2020-05-26T11:46:05Z

This is a confirmed bug that still happens in the Angular v9 with ivy enabled (the same bug is present in VE). Here is a simplified reproduce scenario: https://stackblitz.com/edit/angular-i8tus5?file=package.json

What is going on here is that changeDetectorRef on a ComponentRef points to the change detector of the root (host) view of a dynamically created component. Then, inside the host view we've got the actual component view, but the component view is OnPush thus we never refresh it!

While it works as implemented (and as was implemented in VE), this behaviour is very confusing to the users and I would consider this to be broken from a user perspective. To actually understand why it doesn't work one needs to deeply understand inner workings of Angular (concept of the host view, OnPush etc.). I'm not sure what is the best long terms solution here but the fix won't be trivial.

The good news is that work-arrounds exists - the simplest one would be to remove ChangeDetectionStrategy.OnPush from the dynamically created component - this is what I would recommend for now @RolginRoman .

pkozlowski-opensource · 2020-05-26T12:05:42Z

BTW, this issue will be very visible for people trying to test OnPush components - in fact this issue was already reported for TestBed as #12313 - it is currently highly up-voted and commented on issue biting people in practice.

RolginRoman · 2020-05-26T14:51:59Z

@pkozlowski-opensource thanks for your feedback! 🙂

Is it leads us to 'not to use onPush with dynamic components at all'?
From my perspective such behaviour completely breaks many applications of dynamically-created components (from simple to advanced cases).
Component (or dev 😊) should be smart enough to understand where component will be created (from template or from such factories)

yeap, without OnPush it can work but it can affect app performance if there are many such components, can't it? Possible WA for it: detach CD from components and control CD cycles by self?

montella1507 · 2020-07-29T18:08:21Z

I was researching a bug in our application for 5 days... Now i can confirm that ComponentRef.ChangeDetectorRef .detectChanges doesnt work, but ComponentRef.instance.cdr (injected CDR via construcotr) detectChanges works...

montella1507 · 2020-07-29T18:53:10Z

Workarroud Is to use component's injector to get Real ChangeDetectorRef.

ComponentRef.injector.get(ChangeDetectorRef)

lacolaco · 2020-08-21T10:12:56Z

This problem is still happening with v10.0. Repro is here .

This problem happens often on using CDK Portal and Overlay. Dynamic view creation is not a corner case.

@NgModule

Close angular#39462, angular#36667 In `bootstrap` and `dynamic` components, there is a hostview to contain the component view, if the component is OnPush, trigger change detection on the hostview will not check on the OnPush rootComponent, so we need to mark child components for check. The cases are: case 1: AppComponent is OnPush ``` import { Component, NgModule, ViewContainerRef, ComponentFactoryResolver, Injector, ChangeDetectionStrategy } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @component({ selector: 'my-app', template: ` {{name}} `, changeDetection: ChangeDetectionStrategy.OnPush }) export class AppComponent { name = 'initial value'; ngOnInit() { setTimeout(() => { this.name = 'new value' }, 2000); } } @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent], bootstrap: [ AppComponent ] }) export class AppModule { } ``` case 2: Dynamic component ``` @component({ selector: 'dynamic', template: `{{name}}`, changeDetection: ChangeDetectionStrategy.OnPush }) export class Dynamic { name = 'initial name'; } @component({ selector: 'my-app', template: ` Expected: "initial name" changes to "changed name" after 2s Actual: `, changeDetection: ChangeDetectionStrategy.OnPush }) export class AppComponent { constructor(private _vcRef: ViewContainerRef, private _cfr: ComponentFactoryResolver, private _injector: Injector) {} ngOnInit() { const cmptRef = this._cfr.resolveComponentFactory(Dynamic).create(this._injector); this._vcRef.insert(cmptRef.hostView); setTimeout(() => { cmptRef.instance.name = 'changed name'; console.log('changing name'); cmptRef.changeDetectorRef.detectChanges(); }, 2000); } } ``` So in this PR, for `RootViewRef.detectChanges`, we should always markViewDirty for root component in the hostview.

@NgModule

Close angular#39462, angular#36667 In `bootstrap` and `dynamic` components, there is a hostview to contain the component view, if the component is OnPush, trigger change detection on the hostview will not check on the OnPush rootComponent, so we need to mark child components for check. The cases are: case 1: AppComponent is OnPush ``` import { Component, NgModule, ViewContainerRef, ComponentFactoryResolver, Injector, ChangeDetectionStrategy } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @component({ selector: 'my-app', template: ` {{name}} `, changeDetection: ChangeDetectionStrategy.OnPush }) export class AppComponent { name = 'initial value'; ngOnInit() { setTimeout(() => { this.name = 'new value' }, 2000); } } @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent], bootstrap: [ AppComponent ] }) export class AppModule { } ``` case 2: Dynamic component ``` @component({ selector: 'dynamic', template: `{{name}}`, changeDetection: ChangeDetectionStrategy.OnPush }) export class Dynamic { name = 'initial name'; } @component({ selector: 'my-app', template: ` Expected: "initial name" changes to "changed name" after 2s Actual: `, changeDetection: ChangeDetectionStrategy.OnPush }) export class AppComponent { constructor(private _vcRef: ViewContainerRef, private _cfr: ComponentFactoryResolver, private _injector: Injector) {} ngOnInit() { const cmptRef = this._cfr.resolveComponentFactory(Dynamic).create(this._injector); this._vcRef.insert(cmptRef.hostView); setTimeout(() => { cmptRef.instance.name = 'changed name'; console.log('changing name'); cmptRef.changeDetectorRef.detectChanges(); }, 2000); } } ``` So in this PR, for `RootViewRef.detectChanges`, we should always markViewDirty for root component in the hostview.

@NgModule

Close angular#39462, angular#36667 In `bootstrap` and `dynamic` components, there is a hostview to contain the component view, if the component is OnPush, trigger change detection on the hostview will not check on the OnPush rootComponent, so we need to mark child components for check. The cases are: case 1: AppComponent is OnPush ``` import { Component, NgModule, ViewContainerRef, ComponentFactoryResolver, Injector, ChangeDetectionStrategy } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @component({ selector: 'my-app', template: ` {{name}} `, changeDetection: ChangeDetectionStrategy.OnPush }) export class AppComponent { name = 'initial value'; ngOnInit() { setTimeout(() => { this.name = 'new value' }, 2000); } } @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent], bootstrap: [ AppComponent ] }) export class AppModule { } ``` case 2: Dynamic component ``` @component({ selector: 'dynamic', template: `{{name}}`, changeDetection: ChangeDetectionStrategy.OnPush }) export class Dynamic { name = 'initial name'; } @component({ selector: 'my-app', template: ` Expected: "initial name" changes to "changed name" after 2s Actual: `, changeDetection: ChangeDetectionStrategy.OnPush }) export class AppComponent { constructor(private _vcRef: ViewContainerRef, private _cfr: ComponentFactoryResolver, private _injector: Injector) {} ngOnInit() { const cmptRef = this._cfr.resolveComponentFactory(Dynamic).create(this._injector); this._vcRef.insert(cmptRef.hostView); setTimeout(() => { cmptRef.instance.name = 'changed name'; console.log('changing name'); cmptRef.changeDetectorRef.detectChanges(); }, 2000); } } ``` So in this PR, for `RootViewRef.detectChanges`, we should always markViewDirty for root component in the hostview.

@NgModule

Close angular#39462, angular#36667 In `bootstrap` and `dynamic` components, there is a hostview to contain the component view, if the component is OnPush, trigger change detection on the hostview will not check on the OnPush rootComponent, so we need to mark child components for check. The cases are: case 1: AppComponent is OnPush ``` import { Component, NgModule, ViewContainerRef, ComponentFactoryResolver, Injector, ChangeDetectionStrategy } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @component({ selector: 'my-app', template: ` {{name}} `, changeDetection: ChangeDetectionStrategy.OnPush }) export class AppComponent { name = 'initial value'; ngOnInit() { setTimeout(() => { this.name = 'new value' }, 2000); } } @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent], bootstrap: [ AppComponent ] }) export class AppModule { } ``` case 2: Dynamic component ``` @component({ selector: 'dynamic', template: `{{name}}`, changeDetection: ChangeDetectionStrategy.OnPush }) export class Dynamic { name = 'initial name'; } @component({ selector: 'my-app', template: ` Expected: "initial name" changes to "changed name" after 2s Actual: `, changeDetection: ChangeDetectionStrategy.OnPush }) export class AppComponent { constructor(private _vcRef: ViewContainerRef, private _cfr: ComponentFactoryResolver, private _injector: Injector) {} ngOnInit() { const cmptRef = this._cfr.resolveComponentFactory(Dynamic).create(this._injector); this._vcRef.insert(cmptRef.hostView); setTimeout(() => { cmptRef.instance.name = 'changed name'; console.log('changing name'); cmptRef.changeDetectorRef.detectChanges(); }, 2000); } } ``` So in this PR, for `RootViewRef.detectChanges`, we should always markViewDirty for root component in the hostview.

@NgModule

Close angular#39462, angular#36667 In `bootstrap` and `dynamic` components, there is a hostview to contain the component view, if the component is OnPush, trigger change detection on the hostview will not check on the OnPush rootComponent, so we need to mark child components for check. The cases are: case 1: AppComponent is OnPush ``` import { Component, NgModule, ViewContainerRef, ComponentFactoryResolver, Injector, ChangeDetectionStrategy } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @component({ selector: 'my-app', template: ` {{name}} `, changeDetection: ChangeDetectionStrategy.OnPush }) export class AppComponent { name = 'initial value'; ngOnInit() { setTimeout(() => { this.name = 'new value' }, 2000); } } @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent], bootstrap: [ AppComponent ] }) export class AppModule { } ``` case 2: Dynamic component ``` @component({ selector: 'dynamic', template: `{{name}}`, changeDetection: ChangeDetectionStrategy.OnPush }) export class Dynamic { name = 'initial name'; } @component({ selector: 'my-app', template: ` Expected: "initial name" changes to "changed name" after 2s Actual: `, changeDetection: ChangeDetectionStrategy.OnPush }) export class AppComponent { constructor(private _vcRef: ViewContainerRef, private _cfr: ComponentFactoryResolver, private _injector: Injector) {} ngOnInit() { const cmptRef = this._cfr.resolveComponentFactory(Dynamic).create(this._injector); this._vcRef.insert(cmptRef.hostView); setTimeout(() => { cmptRef.instance.name = 'changed name'; console.log('changing name'); cmptRef.changeDetectorRef.detectChanges(); }, 2000); } } ``` So in this PR, for `RootViewRef.detectChanges`, we should always markViewDirty for root component in the hostview.

@NgModule

…orrectly Close angular#36667, angular#39524. `dynamic` and `bootstrap` components has a parent `host view` as the placeholder. And also all the hooks are registered to the tView of the `host view`, not the component view. Running change detection from the `host view` has several issues. 1. componentRef.changeDetectorRef.detectChanges()/markForCheck() will not update the component. ``` @component({ selector: 'dynamic', template: `{{name}}`, changeDetection: ChangeDetectionStrategy.OnPush }) export class Dynamic { name = 'initial name'; } @component({ selector: 'my-app', template: ` Expected: "initial name" changes to "changed name" after 2s Actual: `, changeDetection: ChangeDetectionStrategy.OnPush }) export class AppComponent { constructor(private _vcRef: ViewContainerRef, private _cfr: ComponentFactoryResolver, private _injector: Injector) {} ngOnInit() { const cmptRef = this._cfr.resolveComponentFactory(Dynamic).create(this._injector); this._vcRef.insert(cmptRef.hostView); setTimeout(() => { cmptRef.instance.name = 'changed name'; console.log('changing name'); // cmptRef.changeDetectorRef is the RootViewRef of the hostView cmptRef.changeDetectorRef.detectChanges(); }, 2000); } } ``` 2. The hooks (such as ngOnCheck) is executed, but the component is not updated. ``` import { Component, NgModule, ViewContainerRef, ComponentFactoryResolver, Injector, ChangeDetectionStrategy, DoCheck } from "@angular/core"; import { BrowserModule } from "@angular/platform-browser"; import { timer } from "rxjs"; @component({ selector: "dynamic", template: ` {{ name }} `, changeDetection: ChangeDetectionStrategy.OnPush }) export class Dynamic implements DoCheck { name = "initial name"; ngDoCheck() { console.log("docheck dynamic"); } } @component({ selector: "my-app", template: ` Expected: "initial name" changes to "changed name" after 2s Actual: `, changeDetection: ChangeDetectionStrategy.OnPush }) export class AppComponent { constructor( private _vcRef: ViewContainerRef, private _cfr: ComponentFactoryResolver, private _injector: Injector ) {} ngOnInit() { const cmptRef = this._cfr .resolveComponentFactory(Dynamic) .create(this._injector); this._vcRef.insert(cmptRef.hostView); setTimeout(() => { cmptRef.instance.name = "changed name"; console.log("changing name"); cmptRef.changeDetectorRef.detectChanges(); }, 2000); } } @NgModule({ imports: [BrowserModule], declarations: [AppComponent, Dynamic], entryComponents: [Dynamic], bootstrap: [AppComponent] }) export class AppModule {} ``` This PR update several points. 1. When create a dynamic component, we create a host view and a component view. We consider these 2 views a single unit, if the component is OnPush, we set the Dirty flag to the host view to make it a an OnPush View, and set the CheckAlways flag to the component.

@NgModule

…orrectly Close angular#36667, angular#39524. `dynamic` and `bootstrap` components has a parent `host view` as the placeholder. And also all the hooks are registered to the tView of the `host view`, not the component view. Running change detection from the `host view` has several issues. 1. componentRef.changeDetectorRef.detectChanges()/markForCheck() will not update the component. ``` @component({ selector: 'dynamic', template: `{{name}}`, changeDetection: ChangeDetectionStrategy.OnPush }) export class Dynamic { name = 'initial name'; } @component({ selector: 'my-app', template: ` Expected: "initial name" changes to "changed name" after 2s Actual: `, changeDetection: ChangeDetectionStrategy.OnPush }) export class AppComponent { constructor(private _vcRef: ViewContainerRef, private _cfr: ComponentFactoryResolver, private _injector: Injector) {} ngOnInit() { const cmptRef = this._cfr.resolveComponentFactory(Dynamic).create(this._injector); this._vcRef.insert(cmptRef.hostView); setTimeout(() => { cmptRef.instance.name = 'changed name'; console.log('changing name'); // cmptRef.changeDetectorRef is the RootViewRef of the hostView cmptRef.changeDetectorRef.detectChanges(); }, 2000); } } ``` 2. The hooks (such as ngOnCheck) is executed, but the component is not updated. ``` import { Component, NgModule, ViewContainerRef, ComponentFactoryResolver, Injector, ChangeDetectionStrategy, DoCheck } from "@angular/core"; import { BrowserModule } from "@angular/platform-browser"; import { timer } from "rxjs"; @component({ selector: "dynamic", template: ` {{ name }} `, changeDetection: ChangeDetectionStrategy.OnPush }) export class Dynamic implements DoCheck { name = "initial name"; ngDoCheck() { console.log("docheck dynamic"); } } @component({ selector: "my-app", template: ` Expected: "initial name" changes to "changed name" after 2s Actual: `, changeDetection: ChangeDetectionStrategy.OnPush }) export class AppComponent { constructor( private _vcRef: ViewContainerRef, private _cfr: ComponentFactoryResolver, private _injector: Injector ) {} ngOnInit() { const cmptRef = this._cfr .resolveComponentFactory(Dynamic) .create(this._injector); this._vcRef.insert(cmptRef.hostView); setTimeout(() => { cmptRef.instance.name = "changed name"; console.log("changing name"); cmptRef.changeDetectorRef.detectChanges(); }, 2000); } } @NgModule({ imports: [BrowserModule], declarations: [AppComponent, Dynamic], entryComponents: [Dynamic], bootstrap: [AppComponent] }) export class AppModule {} ``` This PR update several points. 1. When create a dynamic component, we create a host view and a component view. We consider these 2 views a single unit, if the component is OnPush, we set the Dirty flag to the host view to make it a an OnPush View, and set the CheckAlways flag to the component.

@NgModule

…orrectly Close angular#36667, angular#39524. `dynamic` and `bootstrap` components has a parent `host view` as the placeholder. And also all the hooks are registered to the tView of the `host view`, not the component view. Running change detection from the `host view` has several issues. 1. componentRef.changeDetectorRef.detectChanges()/markForCheck() will not update the component. ``` @component({ selector: 'dynamic', template: `{{name}}`, changeDetection: ChangeDetectionStrategy.OnPush }) export class Dynamic { name = 'initial name'; } @component({ selector: 'my-app', template: ` Expected: "initial name" changes to "changed name" after 2s Actual: `, changeDetection: ChangeDetectionStrategy.OnPush }) export class AppComponent { constructor(private _vcRef: ViewContainerRef, private _cfr: ComponentFactoryResolver, private _injector: Injector) {} ngOnInit() { const cmptRef = this._cfr.resolveComponentFactory(Dynamic).create(this._injector); this._vcRef.insert(cmptRef.hostView); setTimeout(() => { cmptRef.instance.name = 'changed name'; console.log('changing name'); // cmptRef.changeDetectorRef is the RootViewRef of the hostView cmptRef.changeDetectorRef.detectChanges(); }, 2000); } } ``` 2. The hooks (such as ngOnCheck) is executed, but the component is not updated. ``` import { Component, NgModule, ViewContainerRef, ComponentFactoryResolver, Injector, ChangeDetectionStrategy, DoCheck } from "@angular/core"; import { BrowserModule } from "@angular/platform-browser"; import { timer } from "rxjs"; @component({ selector: "dynamic", template: ` {{ name }} `, changeDetection: ChangeDetectionStrategy.OnPush }) export class Dynamic implements DoCheck { name = "initial name"; ngDoCheck() { console.log("docheck dynamic"); } } @component({ selector: "my-app", template: ` Expected: "initial name" changes to "changed name" after 2s Actual: `, changeDetection: ChangeDetectionStrategy.OnPush }) export class AppComponent { constructor( private _vcRef: ViewContainerRef, private _cfr: ComponentFactoryResolver, private _injector: Injector ) {} ngOnInit() { const cmptRef = this._cfr .resolveComponentFactory(Dynamic) .create(this._injector); this._vcRef.insert(cmptRef.hostView); setTimeout(() => { cmptRef.instance.name = "changed name"; console.log("changing name"); cmptRef.changeDetectorRef.detectChanges(); }, 2000); } } @NgModule({ imports: [BrowserModule], declarations: [AppComponent, Dynamic], entryComponents: [Dynamic], bootstrap: [AppComponent] }) export class AppModule {} ``` This PR update several points. 1. When create a dynamic component, we create a host view and a component view. We consider these 2 views a single unit, if the component is OnPush, we set the Dirty flag to the host view to make it a an OnPush View, and set the CheckAlways flag to the component.

…nd onPush not dirty component Close angular#36667 Calling `componentRef.detectChanges()` sometimes not work as expected. ``` @component({ selector: 'dynamic', template: `{{name}}`, changeDetection: ChangeDetectionStrategy.OnPush }) export class Dynamic { name = 'initial name'; } const componetRef = cfr.createComponent(Dynamic); componentRef.changeDetectorRef // host view componentRef.injector.get(ChangeDetectorRef) // component view componentRef.instance.cdRef // componentView componentRef.instance.name = 'something new'; // componentRef.instance.cdRef.markForCheck(); componentRef.detectChanges(); // does not work without `markForCheck` componentRef.changeDetectorRef.detectChanges() // Users expect that Bar gets refreshed. componentRef.injector.get(ChangeDetectorRef).detectChanges() componentRef.instance.cdRef.detectChanges() // Example: https://stackblitz.com/edit/angular-drqzhw?file=src%2Fapp%2Fapp.module.ts ngOnInit() { const cmptRef = this._cfr .resolveComponentFactory(Dynamic) .create(this._injector); this._vcRef.insert(cmptRef.hostView); setTimeout(() => { cmptRef.instance.name = "changed name"; console.log("changing name"); cmptRef.changeDetectorRef.detectChanges(); // does not work }); setTimeout(() => { cmptRef.instance.name = "second changed name"; console.log("changing name"); cmptRef.injector.get(ChangeDetectorRef).detectChanges(); // works }, 2000); } ``` Since when the component is `boostrap` or `dynamic`, we created a hostView to host the component. And the `componentRef.changeDetectorRef` references to that hostView instead of the componentView itself. And when the component is `OnPush` and not dirty, calling `changeDetectorRef.detectChanges()` will bypass the component which is confusing. So this commit mark the root component dirty when calling `changeDetectorRef.detectChanges()` from the root hostView.

…nd onPush not dirty component Close angular#36667 Calling `componentRef.detectChanges()` sometimes not work as expected. ``` @component({ selector: 'dynamic', template: `{{name}}`, changeDetection: ChangeDetectionStrategy.OnPush }) export class Dynamic { name = 'initial name'; } const componetRef = cfr.createComponent(Dynamic); componentRef.changeDetectorRef // host view componentRef.injector.get(ChangeDetectorRef) // component view componentRef.instance.cdRef // componentView componentRef.instance.name = 'something new'; // componentRef.instance.cdRef.markForCheck(); componentRef.detectChanges(); // does not work without `markForCheck` componentRef.changeDetectorRef.detectChanges() // Users expect that Bar gets refreshed. componentRef.injector.get(ChangeDetectorRef).detectChanges() componentRef.instance.cdRef.detectChanges() // Example: https://stackblitz.com/edit/angular-drqzhw?file=src%2Fapp%2Fapp.module.ts ngOnInit() { const cmptRef = this._cfr .resolveComponentFactory(Dynamic) .create(this._injector); this._vcRef.insert(cmptRef.hostView); setTimeout(() => { cmptRef.instance.name = "changed name"; console.log("changing name"); cmptRef.changeDetectorRef.detectChanges(); // does not work }); setTimeout(() => { cmptRef.instance.name = "second changed name"; console.log("changing name"); cmptRef.injector.get(ChangeDetectorRef).detectChanges(); // works }, 2000); } ``` Since when the component is `boostrap` or `dynamic`, we created a hostView to host the component. And the `componentRef.changeDetectorRef` references to that hostView instead of the componentView itself. And when the component is `OnPush` and not dirty, calling `changeDetectorRef.detectChanges()` will bypass the component which is confusing. So this commit mark the root component dirty when calling `changeDetectorRef.detectChanges()` from the root hostView. This commit also resolves the following issue. ``` const myComp = TestBed.createComponent(OnPushComponent); myComp.componentInstance.abc = 123; myComp.detectChanges() // Does not work // We could document that users should do this instead // (and/or add a prop to ComponentFixture called `componentInstanceCDR`): myComp.componentRef.injector.get(ChangeDetectorRef).detectChanges(); // myComp.componentInstanceCDR.detectChanges(); ``` Now calling `myComp.detectChanges()` will work as expect and run CD on the OnPushComponent.

jgomesmv · 2021-03-12T11:48:40Z

I'm also facing this issue on angular 11.0.8. You can find a minimal reproduction here:
https://stackblitz.com/edit/angular-ivy-componentfactory-onpush-issue

Hope it helps!

davoam · 2021-09-24T10:40:11Z

Workarroud Is to use component's injector to get Real ChangeDetectorRef.

ComponentRef.injector.get(ChangeDetectorRef)

In my case the following code helped

this.componentRef.injector.get(ChangeDetectorRef).detectChanges();

hoeni · 2021-12-13T11:38:34Z

Hell, this took me some time to find out this is an Angular issue (NG 13), not mine. But at least the workaround to get a fresh CDR from the injector worked well for me!

montella1507 · 2021-12-13T11:51:29Z

@pkozlowski-opensource as far as this bug is not yet fixed - can we atleast add note - warning, for example there:

https://angular.io/guide/dynamic-component-loader

that component's change detector is often not resolved 100% correctly and its recommended to use components injector to resolve Change detector?

pkozlowski-opensource · 2022-07-04T15:23:14Z

This was just fixed via #46641 - the ComponentRef has a new method - setInput that correctly sets an input and makes sure that change detection is properly invoked. More details in #46641

angular-automatic-lock-bot · 2022-08-04T16:06:19Z

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

atscott added the area: core Issues related to the framework runtime label Apr 16, 2020

ngbot bot added this to the needsTriage milestone Apr 16, 2020

pkozlowski-opensource added core: change detection core: dynamic view creation labels Apr 25, 2020

pkozlowski-opensource added severity1: confusing type: bug/fix workaround2: non-obvious state: confirmed freq2: medium labels May 26, 2020

ngbot bot modified the milestones: needsTriage, Backlog May 26, 2020

pkozlowski-opensource added the triage #1 label May 26, 2020

jelbourn added P4 A relatively minor issue that is not relevant to core functions and removed severity1: confusing labels Oct 1, 2020

JiaLiPassion mentioned this issue Oct 27, 2020

AppComponent OnPush not triggers change detection #39462

Closed

JiaLiPassion mentioned this issue Oct 27, 2020

fix(core): dynamic onPush component should trigger change detection correctly #39463

Closed

JiaLiPassion self-assigned this Oct 27, 2020

JiaLiPassion mentioned this issue Oct 31, 2020

Dynamic component detectChanges trigger ngDoCheck but not refresh view #39524

Closed

JiaLiPassion mentioned this issue Feb 15, 2021

feat(core): display warning when calling detectChanges() on the dynamic OnPush component. #40849

Closed

atscott mentioned this issue Jan 21, 2022

ComponentRef.changeDetectorRef is not the same instance that's injected into the Component it's a Ref for #18817

Closed

AndrewKushnir removed the triage #1 label Mar 15, 2022

pkozlowski-opensource closed this as completed Jul 4, 2022

pkozlowski-opensource modified the milestones: Backlog, Fixit H1'2022 Jul 4, 2022

angular-automatic-lock-bot bot locked and limited conversation to collaborators Aug 4, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ComponentRef Change detector doesn't trigger detecting for view #36667

ComponentRef Change detector doesn't trigger detecting for view #36667

RolginRoman commented Apr 16, 2020

pkozlowski-opensource commented May 26, 2020

pkozlowski-opensource commented May 26, 2020

RolginRoman commented May 26, 2020

montella1507 commented Jul 29, 2020

montella1507 commented Jul 29, 2020

lacolaco commented Aug 21, 2020 •

edited

jgomesmv commented Mar 12, 2021

davoam commented Sep 24, 2021

hoeni commented Dec 13, 2021 •

edited

montella1507 commented Dec 13, 2021

pkozlowski-opensource commented Jul 4, 2022

angular-automatic-lock-bot bot commented Aug 4, 2022

ComponentRef Change detector doesn't trigger detecting for view #36667

ComponentRef Change detector doesn't trigger detecting for view #36667

Comments

RolginRoman commented Apr 16, 2020

🐞 bug report

Affected Package

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

pkozlowski-opensource commented May 26, 2020

pkozlowski-opensource commented May 26, 2020

RolginRoman commented May 26, 2020

montella1507 commented Jul 29, 2020

montella1507 commented Jul 29, 2020

lacolaco commented Aug 21, 2020 • edited

jgomesmv commented Mar 12, 2021

davoam commented Sep 24, 2021

hoeni commented Dec 13, 2021 • edited

montella1507 commented Dec 13, 2021

pkozlowski-opensource commented Jul 4, 2022

angular-automatic-lock-bot bot commented Aug 4, 2022

lacolaco commented Aug 21, 2020 •

edited

hoeni commented Dec 13, 2021 •

edited