Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using React Component in Angular 2

I have a set of react components and i am trying to use them in an Angular 2 app.

Here is the Main React Component that i am trying to use

import React, {Component} from 'react';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import MyCardContainer from './containers/MyCardContainer';
import './assets/style/main.css';
export default class MyCard extends Component {

    constructor(props){
        super(props);
    }

    componentWillMount(){

    }

    render(){
        if(this.props.param1 && this.props.param2) {
            return (
                <Provider store={configureStore()}>
                    <MyCardContainer param1={this.props.param1} param2={this.props.param2} key='container'/>
                </Provider>
            )
        }
        else{
            return(
                <div>
                    Invalid Params are provided for MyCard Component !!
                </div>
            )
        }
    }
}

Now in my angular project i have the following files.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { MyCardHostComponent } from './mycardhost.component';

@NgModule({
  declarations: [
    AppComponent,
    MyCardHostComponent
  ],
  imports: [
      BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

app.component.html

<div style="text-align:center">
  <h1>
    Welcome to React Components Usage Page
  </h1>
  <div>
    <my-card-host></my-card-host>
  </div>
  <div id="my-card"></div>
</div>

And mycardhost.component.ts

I tried both OnInit and AfterContentInit . I only had one active at a given time. Initially in the template i didn't have the div with id "my-card" (which i have in

import {Component, ViewChild,ElementRef,AfterContentInit} from '@angular/core';
import {MyCard} from './MyCard';
@Component({
  selector: 'my-card-host',
  templateUrl:"./mycardhost.component.html"
})

export class MyCardHostComponent implements OnInit, AfterContentInit{

    @ViewChild('my-card') myCard: ElementRef;

    ngOnInit(){
       // MyCard.initialize("param1val","param2val",document.getElementById("my-card"));
    }

    ngAfterContentInit(){
      MyCard.initialize("param1val","param2val",this.myCard.nativeElement);
    }
}

and the template file for the mycardhost.component.html which has the div tag with id "my-card" where the React Component will be loaded.

<div id="my-card"></div>

And when i run the app the React Store and Reducers are getting initialized. How ever i am getting the following Error: Which indicated the document.getElementById() that i am passing is not a valid DOM Element.

I tried putting break points in the Angular Components and none of them are getting executed. Not sure what i am doing wrong. Really appreciate any help.

Uncaught ZoneAwareError {__zone_symbol__error: Error: _registerComponent(...): Target container is not a DOM element.
    at invariant (eval at <an…, …}

   Target container is not a DOM element. at invariant (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:39:15) [<root>] at Object._registerComponent (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:447:200) [<root>] at Object._renderNewRootComponent (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:470:34) [<root>] at Object.wrapper [as _renderNewRootComponent] (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:66:21) [<root>] at Object._renderSubtreeIntoContainer (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:550:32) [<root>] at render (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:570:23) [<root>] at wrapper (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:66:21) [<root>] at eval (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:54:22) [<root>] at Object.eval (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1), <anonymous>:607:2) [<root>] at __webpack_require__ (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1), <anonymous>:557:30) [<root>] at fn (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1), <anonymous>:88:20) [<root>] at Object.eval (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1), <anonymous>:588:19) [<root>] at __webpack_require__ (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1), <anonymous>:557:30) [<root>] at eval (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1), <anonymous>:580:37) [<root>] at eval (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1), <anonymous>:583:10) [<root>] at Object.<anonymous> (http://localhost:8080/js/app.js:1873:1) [<root>] at __webpack_require__ (http://localhost:8080/js/polyfills.js:53:30) [<root>] at eval (eval at <anonymous> (http://localhost:8080/js/app.js:732:1), <anonymous>:8:27) [<root>] at Object.<anonymous> (http://localhost:8080/js/app.js:732:1) [<root>] at __webpack_require__ (http://localhost:8080/js/polyfills.js:53:30) [<root>] at eval (eval at <anonymous> (http://localhost:8080/js/app.js:760:1), <anonymous>:7:17) [<root>] at Object.<anonymous> (http://localhost:8080/js/app.js:760:1) [<root>] at __webpack_require__ (http://localhost:8080/js/polyfills.js:53:30) [<root>] at eval (eval at <anonymous> (http://localhost:8080/js/app.js:746:1), <anonymous>:13:31) [<root>] at Object.<anonymous> (http://localhost:8080/js/app.js:746:1) [<root>] at __webpack_require__ (http://localhost:8080/js/polyfills.js:53:30) [<root>] at eval (eval at <anonymous> (http://localhost:8080/js/app.js:712:1), <anonymous>:5:20) [<root>] at Object.<anonymous> (http://localhost:8080/js/app.js:712:1) [<root>] at __webpack_require__ (http://localhost:8080/js/polyfills.js:53:30) [<root>] at Object.<anonymous> (http://localhost:8080/js/app.js:1880:18) [<root>] at __webpack_require__ (http://localhost:8080/js/polyfills.js:53:30) [<root>] at webpackJsonpCallback (http://localhost:8080/js/polyfills.js:24:23) [<root>] at http://localhost:8080/js/app.js:1:1 [<root>]
__zone_symbol__name
:
"Invariant Violation"
like image 531
Sateesh K Avatar asked Aug 23 '17 12:08

Sateesh K


People also ask

Can we use Angular and React in one project?

One product can be built with Angular, another one with React. These products, even though are built by different teams using different stacks, often share components and utilities.

Why React is faster than Angular?

React uses one-way data binding and virtual DOM, whereas Angular uses two-way data binding and real DOM. Moreover, React is faster than Angular as it has a smaller bundle size.

Can you React component without rendering?

Nope, render() method can't return an empty array or anything other than other React component.

Is React more popular than Angular?

Angular: Popularity. Stack Overflow names React. js the most loved and most wanted web framework by developers (74.5%). Angular has a lower rate – 57.6% of developers are interested in working with it.


1 Answers

Finally i am able to resolve the Issue.

All i needed to change was the way i was importing of the Component.

i had to change the below line

import MyCard from 'my-components-react';

to

import MyCard from 'my-components-react/es/MyCard';

Thanks

like image 72
Sateesh K Avatar answered Sep 21 '22 12:09

Sateesh K