Exported TypeScript Class not included in WebPack bundle if not used directly
<p>I'm converting a javascript project with Angular 1.x to WebPack and TypeScript (using <a href="https://github.com/TypeStrong/ts-loader" rel="nofollow">ts-loader</a>). I got it mostly working, but I'm running into trouble when ts-loader seems to be optimizing my scripts out of the bundle when the exports are not directly used.</p>

<p>Here's a sample project demonstrating the issue (npm install, webpack, then load index.html and watch the console).</p>

<p><a href="https://github.com/bbottema/webpack-typescript" rel="nofollow">https://github.com/bbottema/webpack-typescript</a></p>

<p>The logging from ClassA is showing up, but angular is reporting ClassB missing (provider). If you look in bundle.js you'll notice ClassB missing entirely. The difference is ClassA begin use directly after importing, and ClassB is only referenced by type for compilation.</p>

<p>Is it a bug, or is there a way to force ClassB to be included? Or am I going about it wrong? Angular 2 would probably solve this issue, but that's a step too large right now.</p>

<p>Relevant scripts from the project above:</p>

<hr>

<p>package.json</p>

<pre><code>{
    "devDependencies": {
        "typescript": "^1.7.5",
        "ts-loader": "^0.8.1"
    },
    "dependencies": {
        "angular": "1.4.9"
    }
}
</code></pre>

<p>webpack.config.js</p>

<pre><code>var path = require('path');

module.exports = {
    entry: {
        app: './src/entry.ts'
    },
    output: {
        filename: './dist/bundle.js'
    },
    resolve: {
        root: [
            path.resolve('./src/my_modules'),
            path.resolve('node_modules')
        ],
        extensions: ['', '.ts', '.js']
    },
    module: {
        loaders: [{
            test: /\.tsx?$/,
            loader: 'ts-loader'
        }]
    }
};
</code></pre>

<p>tsconfig.json</p>

<pre><code>{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs"
  },
  "exclude": [
    "node_modules"
  ]
}
</code></pre>

<p>index.html</p>

<pre><code>&lt;!doctype html&gt;
&lt;html ng-app="myApp"&gt;
    &lt;body&gt;
        &lt;script src="dist/bundle.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>entry.js</p>

<pre><code>declare var require: any;

'use strict';

import ClassA = require('ClassA');
import ClassB = require('ClassB');

var a:ClassA = new ClassA(); // direct use, this works

var angular = require('angular');

angular.module('myApp', []).
    // this compiles as it should, but in runtime the provider will not be packaged and angular will throw an error
    run(function(myProvider: ClassB) {
    }
);
</code></pre>

<p>ClassA.ts</p>

<pre><code>// this line will be logged just fine
console.log('ClassA.ts: if you see this, then ClassA.ts was packaged properly');

class ClassA {
}

export = ClassA;
</code></pre>

<p>ClassB.ts</p>

<pre><code>declare var require: any;

// this line is never logged
console.log('ClassB.ts: if you see this, then ClassB.ts was packaged properly');

class ClassB {
}

var angular = require(angular);

angular.module('myApp').service(new ClassB());

export = ClassB;
</code></pre>