Angular2 + webpack Uncaught ReferenceError：系统未定义答案

【问题标题】：Angular2 + webpack Uncaught ReferenceError: System is not definedAngular2 + webpack Uncaught ReferenceError：系统未定义
【发布时间】：2016-08-16 01:55:02
【问题描述】：

我也遇到了同样的问题： Why webpack bundled as 'System.register'

我已经使用 webpack 构建了 bundle.js，但出现错误：

Uncaught ReferenceError: System is not defined

我的 bundle.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/
    }]
  }
};

感谢您的帮助

【问题讨论】：

对我来说同样的问题
这个问题你解决了吗？
是的，我已经修复了，就像我认为在我的情况下这是一个愚蠢的小错误，我的 IDE 自动（保存时）将 ts 文件编译为 js，所以 webpack 在构建时也添加了这个js 文件到包中，所以它会导致问题。

标签： typescript angular webpack commonjs systemjs

【解决方案1】：

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

【讨论】：

您可以尝试添加'ts-loader'参数：query: {compilerOptions: {}}

【解决方案2】：

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

【讨论】：