withNgService HOC for injecting modules from Angular.JS's dependency injector into a React component

withNgService.tsx

import * as React from 'react';
import hoistStatics from 'hoist-non-react-statics';

declare var angular: any;

let injector;

// NOTE you probably can't run this at the top level of a module because angular takes time to load and bootstrap
export default function getNgService<T = any>(serviceName: string): T {
  if (!injector) {
    injector = angular.element(document.body).injector();
    // if we still don't get it, blow up
    if (!injector) {
      throw new Error(`Unable to get the angular injector`);
    }
  }
  return injector.get(serviceName);
}

export const withNgService = function <NgProps = {}, ComponentProps = {}>(...injectorKeys: string[]) {
  return function<Props = ComponentProps>(Component: React.ComponentType<Props & NgProps>): React.ComponentType<Props> {

    class withNgServiceWrapper extends React.Component<Props & NgProps> {
      static displayName = `withNgService(${Component.displayName || Component.name})`;
      static WrappedComponent = Component;
      private ngProps = injectorKeys.reduce((aggr, key) => {
        aggr[key] = getNgService(key);
        return aggr;
      }, {} as NgProps);

      render() {
        return (
          <Component
            {...this.props}
            {...this.ngProps}
          />
        );
      }
    }
    return hoistStatics(withNgServiceWrapper, Component);
  }
}

// test it out
interface MyNgProps {
  ngThing: string
}

interface Props {
  a: number
}

class _Test extends React.Component<Props & MyNgProps> {
  render() {
    const { a, ngThing } = this.props
    return null
  }
}

const Test = withNgService<MyNgProps>('$http')(_Test)

const Test2 = withNgService<MyNgProps, Props>('$http')((props) => (
  <p>{props.ngThing}{props.a}</p>
))

class App extends React.Component {
  render() {
    return (
      <>
        <Test a={1} />
        <Test2 a={123} />
      </>
    );
  }
}