react.di
react.di copied to clipboard
Not able to inject angular service from a library into react app.
I am using our own angular package inside a react app. I have installed all the necessary node modules mentioned in the documentation along with tsconfig.json. Here is my code
import React from 'react';
import { Inject, Module } from 'react.di';
import "reflect-metadata";
import { HostIntegrationService } from '@lifecare/host-integration';
import { } from 'react.di';
@Module({
providers: [HostIntegrationService]
})
export default class App extends React.Component {
@Inject hostService: HostIntegrationService;
constructor(args: any) {
super(args);
}
async componentDidMount() {
console.log('instance', this.hostService);
}
render() {
return (
<div>
<h1>Welcome</h1>
</div>
)
}
}
and package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@angular/common": "^7.2.14",
"@angular/core": "^7.2.14",
"@lifecare/host-integration": "^7.0.0-beta.17",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"@types/jest": "^24.0.12",
"@types/node": "^12.0.0",
"@types/react": "^16.8.16",
"@types/react-dom": "^16.8.4",
"injection-js": "^2.2.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.0",
"react.di": "^2.0.2",
"reflect-metadata": "^0.1.13",
"typescript": "^3.4.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I always get instance as undefinded in the console.
What am I missing here?
@kiran-bobade Sry for the late reply. Does your own services get injected properly?