Angular2 + webpack Uncaught ReferenceError: System

Question

I've got the same issue like here: Why webpack bundled as 'System.register'

I've build bundle.js with webpack and I am getting error:

Uncaught ReferenceError: System is not defined

my bundle.js inlcudes:

   System.register(['angular2/platform/browser', './app.component', 'rxjs/Rx'], function(exports_1, context_1) {
        "use strict";
        var __moduleName = context_1 && context_1.id;
        var browser_1, app_component_1;
        return {
            setters:[
                function (browser_1_1) {
                    browser_1 = browser_1_1;
                },
                function (app_component_1_1) {
                    app_component_1 = app_component_1_1;
                },
                function (_1) {}],
            execute: function() {
                //enableProdMode();
                browser_1.bootstrap(app_component_1.AppComponent)
                    .then(function (success) { return console.log("Bootstrap success"); })
                    .catch(function (error) { return console.log(error); });
            }
        }
    });

I've already changed module to commonjs in tsconfig.json, so it's probably some silly mistake somewhere. Here is my tsconfig.json

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "module": "commonjs",
    "removeComments": true,
    "sourceMap": false
  },
  "exclude": [
      "node_modules"
  ]
}

and webpack.config.js

module.exports = {
  entry: "./app/main",
  output: {
    filename: "bundle.js"
  },
  resolve: {
    extensions: ['', '.js', '.ts']
  },
  module: {
    loaders: [{
      test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/
    }]
  }
};

Thanks for any help

Answer 1

When using webpack with Typescript project, the .ts files should not be transpiled to .js files if you are using commonjs as a module.

Answer 2

Change module to commonjs in compilerOptions of your tsconfig.json.