How to make thrift to work with Angular 2 and webpack?

Question

From a simple Angular 2 + Webpack working project, I'm trying to integrate Apache Thrift by implementing the Thrift's tutorial. I reach a point where everything works except the browser cannot find the Thrift module:

Uncaught ReferenceError: Thrift is not defined

The error is thrown from the thrift generated files, tutorial_types.js, when it tries to access the thrift module:

InvalidOperation = function(args) {
  this.whatOp = null;
  this.why = null;
  if (args) {
    if (args.whatOp !== undefined && args.whatOp !== null) {
      this.whatOp = args.whatOp;
    }
    if (args.why !== undefined && args.why !== null) {
      this.why = args.why;
    }
  }
};
Thrift.inherits(InvalidOperation, Thrift.TException);

Angular loads the application, that loads the generated files that try to load Thrift and fail.

The project is available here: https://github.com/osechet/angular-thrift

To test, run:

git clone https://github.com/osechet/angular-thrift
cd angular-thrift
npm install
npm gen.thrift
npm start

Then open http://localhost:8080/ in a browser.

I checked the files created by Webpack and the thrift module is bundled. What am I missing?

Answer 1

Thanks to @JoeClay's remark, I found the problem. The Javascript library provided with Thrift does not export any module and thus isn't properly bundled by Webpack.

I changed my project to use the browser module of the nodejs library provided by Thrift (thrift/lib/nodejs/lib/thrift/browser.js). Doing so, I have been able to make the whole application to work.