var directive = reactBridgeDirective
    .forLazyLoadedComponent(() => 
    import("@msteams/component")
        .then(_ => _.AwesomeReactComponent)
    )


    .withInjected("loggerService").ofType<ILoggerService>()
    .withInjected("someAngularService").ofType<someAngularService>()

    .setUpComponentProps((services) => {
        return {
            onButtonClick:() => { /* more code */},
            randomProp: "Hello"
        }
    })

    .onComponentDidMount((component, injectedServices) => {
        /* Call functions on the component */
    })

    .create();

angular.module("app").directive('componentWrapper', directive);

<div>
    <component-wrapper ng-if="ctrl.isReactEnabled"></component-wrapper>
</div>

reactBridgeDirective
    .forLazyLoadedComponent(() => 
    import("@msteams/component")
        .then(_ => _.AwesomeReactComponent)
    )
    .withInjected("someAngularService").ofType<someAngularService>()
    .setUpComponentProps((services) => {
        return {
            onButtonClick:() => { /* more code */},
            randomProp: "Hello"
        }
    })
    .onComponentDidMount((component, injectedServices) => {
        component.printSomething(
            injectedServices.someAngularService.getString()
        );
    })
    .create();

class Wrapper extends React.Component {
    /* other component related code*/
    printSomething(str) {
        console.log(str);
    } 

    render() {
        return (
            <>
                {{this.props.randomProp}}
                <button onClick={this.props.onButtonClick}></button>
            </>
        );
    }
}

reactBridgeDirective
    .forLazyLoadedComponent(/* use Dynamic import*/ )
    .withInjected("loggerService").ofType<ILoggerService>()
    .withManualRendering((render) => {
        return new Promise((resolve, reject) => {
            requestAnimationFrame(() => {
                /*Render React component whenever you want to*/
            });
        });
      })
    .setUpTelemetry((services) => {
      /* return scenarios for telemetry*/
      const scenarios = services.constants.getConstant("scenarios");
      return [ scenarios.scenarioOne, scenarios.scenarioTwo ];
    })
    .withErrorHandling((error, element, injectedServices) => {
        /* log the error or display a custom error component*/
    })
    .setUpComponentProps(() => (
        /* Send props to React for 2 way communication*/
    ))
    .onComponentDidMount((component, injectedServices) => {
         /* Log or do something else*/
    })
    .onComponentWillUnmount((component, injectedServices) => {
        /* Log or do something else*/
    })
    .create();

import * as React from "react";
import { SharepointFilesContainer } from "./containers";
import { LoggingService } from "@msteams/services-logging";

class SharePointFilesLayout extends React.Component<{}> {
  constructor(props: any) {
    super(props);
  }

  public render() {
    LoggingService.logInfo("Rendering Sharepoint Files View");
    return <SharepointFilesContainer />;
  }
}

export { SharePointFilesLayout };

resolve : {
    alias : {
        "@msteams/services-logging": "shims/loggingServiceShim.ts"
    }
}

export const LoggingService: ILoggingService = 

  angular.element(document.body).injector().get('bridgeLoggingService');

import { map } from "lodash"

import { http } from "./http"

import { map } from "lodash"

import { http } from "./http"

resolve : {
    alias : {
        "lodash": "customLodash/index.ts"
    }
}