Angular2 + webpack 未捕获的参考错误:未定义系统

Question

我遇到了同样的问题，就像这里一样：为什么 webpack 捆绑为"System.register"

我已经使用 webpack 构建了捆绑包.js但出现错误：

未

捕获的引用错误：未定义系统

我的捆绑包.js包括：

   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); });
            }
        }
    });

我已经在 tsconfig.json 中将模块更改为 commonjs，所以这可能是某个地方的一些愚蠢的错误。这是我的tsconfig.json

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

和 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/
    }]
  }
};

感谢您的任何帮助

Answer 1

将module更改为 tsconfig.json compilerOptions中的commonjs。

Answer 2

将 webpack 与 Typescript 项目一起使用时，如果您使用 commonjs 作为模块，则不应将 .ts 文件转换为.js文件。