From @bengry on July 22, 2018 7:57
When having the following structure: React -> (via ReactContent) Angular -> React,
the inner React component is attached to the root of the VDOM:

Instead of being nested under the ReactContent (seen above under the div with key="run"), it's nested as a root node in the VDOM.
These nodes are also kept in the VDOM after the DOM element has been removed.
Demonstrated here.
A workaround for this (but not a solution) by @xjerwa - in AngularReactRendererFactory:
end() {
if (DEBUG) { console.log('RootRenderer > end > isRenderPending:', this.isRenderPending, 'reactRootNodes:', this.reactRootNodes); }
// Flush any pending React element render updates. This cannot be done
// earlier (as is done for DOM elements) because React element props
// are ReadOnly.
// Potential fix: manually unmount ReactNodes that don't correspond to a DOM element
for (let i = 0; i < this.reactRootNodes.length; i++) {
const node = this.reactRootNodes[i] as any;
if (!document.contains(node._parent) && ReactDOM.unmountComponentAtNode(node._parent)) {
this.reactRootNodes.splice(i--, 1);
}
}
// End potential fix
if (this.isRenderPending) {
// Remove root nodes that are pending destroy after render.
this.reactRootNodes = this.reactRootNodes.filter(node => !node.render().destroyPending);
this.isRenderPending = false;
}
}
Copied from original issue: benfeely/angular-react#13
From @bengry on July 22, 2018 7:57
When having the following structure:

React -> (via ReactContent) Angular -> React,the inner React component is attached to the root of the VDOM:
Instead of being nested under the
ReactContent(seen above under thedivwithkey="run"), it's nested as a root node in the VDOM.These nodes are also kept in the VDOM after the DOM element has been removed.
Demonstrated here.
A workaround for this (but not a solution) by @xjerwa - in
AngularReactRendererFactory:Copied from original issue: benfeely/angular-react#13