When using React components inside Angular ones, they are attached to the root of the VDOM tree & not removed

[bengry]

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

[bengry]

This issue was moved to microsoft/angular-react#1