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"
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.
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.
Nope, render() method can't return an empty array or anything other than other React component.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With