using React inside Angular 2, ERROR TypeError: Cannot read property 'render' of undefined

Question

I'm trying to include a library written for react into my Angular 2 application, but ReactDOM seems to stay undefined to typescript whatever I try, even though the variable has content in chrome's javascript inspector. (image of chrome error message, and an image of chrome breakpoint right before error)

To isolate the problem I've looked at other attempts at combining the two, but found only solutions for Angular 2 Beta and React versions < 1.0.0 - so I took one of them (github.com/LookLikeAPro/Angular-2-React-Example), updated the packages and modified the code, and finally ran into the same error.

My fork can be found here: github.com/aJonathanSchneider/Angular-2-React-Example-fork, commands to start it are

npm install
npm start

Types for ReactDOM are exposed like this:

/// <reference path="../../node_modules/@types/react/index.d.ts" />
/// <reference path="../../node_modules/@types/react-dom/index.d.ts" />
import ReactDOM = __React.__DOM;

export default ReactDOM;

The Angular component which should include a react component looks like this:

import React from "./react";
import ReactDOM from "./react-dom";
import {Component} from '@angular/core';

@Component({
    selector: 'react-component',
    template:
        '<div [id]="id">wrapper</div>'
    ,
    inputs: ['component', 'props']
})
export class ReactComponent {
    component: any;
    props: Object;
    id: number;
    drawNode: any;
    ngOnInit() {
        this.id = Math.floor(Math.random() * 9999999);
    }
    ngAfterViewInit() {
        this.drawNode = document.getElementById(this.id.toString());
        this.render();
    }
    ngOnChanges() {
        if (this.drawNode) {
            this.render();
        }
    }
    render() {
        ReactDOM.render(React.createElement(this.component, this.props), this.drawNode);
    }
}

And this is the order of scripts inside my index.html:

 <script src="node_modules/es6-shim/es6-shim.min.js"></script>
 <script src="node_modules/reflect-metadata/Reflect.js"></script>

 <script src="node_modules/react/dist/react.min.js"></script>
 <script src="node_modules/react-dom/dist/react-dom.min.js"></script>
 <script src="node_modules/systemjs/dist/system.src.js"></script>
 <script src="node_modules/rxjs/bundles/Rx.js"></script>
 <script src="node_modules/zone.js/dist/zone.js"></script>
 <script>var __React = React;</script>
 <script src="systemjs.config.js"></script> 
 <script>
      System.import('app/main.js').catch(function(err){ console.error(err); });
 </script> 

Thanks a lot in advance!

Answer 1

While it's possible to combine Angular 2 and React, it's considered a bad technical approach. Although Angular is a modular framework, trying to use React to replace the UI modules will lead to more errors. The reason is that React and Angular take sometimes very different approaches while creating a user interface, use different event loops to capture user interaction and can have competing access to the DOM. Angular does change detection through zone.js and React builds a virtual DOM to generate real DOM patches. So basically there's no React-to-Angular interface.

Moreover, React is build around the unidirectional paradigm, whereas Angular has two-way data binding, which will make Components work very differently.

This article compares the two pretty well. The author creates the same application once in Angular and once in React with additional libraries.