1

I am an absolute beginner to React. I am creating a simple react app with App Component only and I have own angular library (NPM package) with a simple service. And Angular service has some dependencies injected into its constructor.

I tried using inversifyJs but had no luck. I am getting the following error.

enter image description here

and here is my react code - corelib is my own library

App.tsx

import React from 'react';
import "reflect-metadata";
import { TYPES, myContainer } from "./container-config";
import { CorelibService } from 'corelib'
import { inject } from 'inversify'

export default class App extends React.Component {
  @inject(TYPES.CORE_LIB) hostService: CorelibService;
  constructor(props: any) {
    super(props);
  }
  async componentDidMount() {
    const ninja = myContainer.get<CorelibService>(TYPES.CORE_LIB);
    console.log('ninja', ninja);
  }
  render() {
    return (
      <div>
        <h1>Welcome to React App</h1>
      </div>
    )
  }
}

container-config.ts

import "reflect-metadata";
import { Container, decorate, injectable } from 'inversify';
import { CorelibService, MyService } from 'corelib';

const TYPES = {
    CORE_LIB: Symbol.for("HostAppIntegration"),
    MY_SERVICE: Symbol.for("MyService")
};
export { TYPES }

decorate(injectable(), CorelibService);
decorate(injectable(), MyService);

const myContainer = new Container();
myContainer.bind<CorelibService>(TYPES.CORE_LIB).to(CorelibService);
myContainer.bind<MyService>(TYPES.MY_SERVICE).to(MyService);
export { myContainer };

here is Angular code

Corelib.service.ts

import { Injectable } from '@angular/core';
import { MyService } from './my.serivce';

@Injectable({
  providedIn: 'root'
})
export class CorelibService {

  constructor(private myService: MyService) { }

  public sayHello() {
    console.log('Hello from sample angular library');
    this.myService.sayHi();
  }
}

my.service.ts

import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class MyService {
    constructor() {
        console.log('my service');
    }
    public sayHi() {
        console.log('Hi from sample angular library - my service');
    }
}

I don't understand, what am I mssing here? or

Is it really possible to use Angular service in react?

kiran
  • 1,242
  • 1
  • 10
  • 25
  • You cannot use Inversify decorators in React component classes because they aren't instantiated by Inversify. Access a container directly. Also it's unclear how this is related to Angular. Angular and Inversify DI look similar but they aren't compatible. – Estus Flask May 07 '19 at 07:20
  • @estus How this is related to Angular? - my library uses angular DI feature. – kiran May 07 '19 at 07:47
  • @estus It means I cannot use NPM package that has Angular reference. – kiran May 07 '19 at 07:53
  • I see. But I don't understand why you're using Inversify when you need to use Angular. – Estus Flask May 07 '19 at 07:59
  • Look hire: https://stackoverflow.com/questions/54408694/connect-angular-application-with-reactjs-app/54408718#54408718 – kris_IV May 21 '19 at 09:51

2 Answers2

1

Angular injector should be retrieved to access services, as shown in this answer:

@NgModule({ imports: [BrowserModule] })
export class AppModule {
  ngDoBootstrap() {}  
}

export default class App extends React.Component {
  async componentDidMount() {
    const appModule = await platformBrowserDynamic().bootstrapModule(AppModule);
    const myService = appModule.injector.get(MyService);
    ...
  }
  ...
}

It's impossible to use @inject decorators on React component class because a class is instantiated by React, not by Angular or Inversify.

Inversify was inspired by Angular DI but they aren't compatible and shouldn't be mixed. If MyService was registered as a service with Angular Injectable, it should be retrieved from Angular, not Inversify container.

Estus Flask
  • 206,104
  • 70
  • 425
  • 565
0

Yes this is possible if you are using Typescript in React. You are using inversify for DI?

kriztyahn
  • 1