Using react2angular, react isn't recognized, no erros
Question
I am transitioning an angularjs project to react. For this I'm using react2angular. I've followed the tutorials, but for some reason, react isn't recognized. I'm not receiving any errors. Note: I've also tried ngReact and had the same problem.
I have a very simple react component:
MyComponent.jsx
import { Component } from 'react'
import { react2angular } from 'react2angular'
class MyComponent extends Component {
render() {
console.log('MyComponent Render');
return <div>
<p>FooBar: {this.props.fooBar}</p>
<p>Baz: {this.props.baz}</p>
</div>
}
}
angular
.module('deuiApp', [])
.component('myComponent', react2angular(MyComponent, ['fooBar', 'baz']));
I added the component to:
text.tpl.html
<div>
<div class="QuestText">
<my-component foo-bar="3" baz="'baz'"></my-component>
</div>
</div>
When it's running and I inspect the html page in Chrome's Developer Tools, I see this.
<div class="QuestText">
<my-component foo-bar="3" baz="'baz'"></my-component>
</div
Nothing shows up in the console. It's as if it doesn't even recognize react.
More Information:
In package.json -- npm packages are installed
dependencies: {
"angular": "1.6.10",
"angular-cookies": "1.6.10",
"angular-i18n": "1.6.10",
"angular-resource": "1.6.10",
"angular-sanitize": "1.6.10",
"prop-types": "^15.7.2",
"react": "^16.11.0",
"react-bootstrap": "0.32.1",
"react-dom": "^16.11.0",
"react2angular": "^4.0.6",
},
devDependencies: {
"babel-loader": "7.1.2",
"babel-plugin-transform-react-jsx": "6.24.1",
"webpack": "3.11.0",
"webpack-dev-server": "2.11.2",
}
Relevant information in webpack.config.js
module.exports = function () {
const config = {};
config.resolve = {
extensions: ['.js', '.jsx', '.ts', '.css', '.scss']
};
config.devtool = 'source-map'
config.module = {
rules: [
{
test: /\.(js|jsx)$/,
use: ['ng-annotate-loader', {
loader: 'awesome-typescript-loader',
options: {
entryFileIsJs: true,
transpileOnly: true
}
}],
exclude: [/node_modules/],
}]
}
return config;
}();
.babelrc
{
"plugins": ["transform-react-jsx"],
"presets": [
["env", {
"modules": false,
"targets": {
"node": "current",
"browsers": [
"chrome >= 59",
"firefox >= 50",
"ie >= 11",
"edge >= 40"
]
}
}]
]
}
I'm at a loss. I'd appreciate any help I can get.
3 answers
solution1
0 2020-01-21 22:10:15
It appears that you're not bootstrapping angular, unless you're doing it somewhere else; you haven't posted the bootstrapping code.
Bootstrapping is either done with an ngApp directive:
<body ng-app="deuiApp">
or manually:
angular.bootstrap(document.createElement('div'), ['deuiApp']);
solution2
0 2021-01-27 12:23:38
Instead of:
import { Component } from 'react'
use:
import React, { Component } from 'react'
solution3
-1 ACCPTED 2019-11-15 10:49:58
I think you are missing the right injection way, because in the documentation of react2angular it says
Dependency Injection It's easy to pass services/constants/etc. to your React component: just pass them in as the 3rd argument , and they will be available in your component's Props. For example:
angular
.module('myModule', [])
.constant('FOO', 'FOO!')
.component('myComponent', react2angular(MyComponent, [], ['$http', 'FOO']))
your code must be in this order
angular
.module('deuiApp', [])
.component('myComponent', react2angular(MyComponent, [], ['fooBar', 'baz']));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.