Tại sao gói webpack lại là 'System.register'

Question

Tôi đang cố gắng phát triển một ứng dụng angular2 bằng cách sử dụng webpack, nhưng nó kết thúc bằng một lỗi trong bảng điều khiển trình duyệt nói: Uncaught ReferenceError: Hệ thống không được xác định.

Khi tôi nhìn vào js kèm, tôi thấy nó được sử dụng System.register như dưới đây:

function(module, exports) { 

    System.register(['angular2/platform/browser', './app.component'], function(exports_1) { 
     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; 
       }], 
      execute: function() { 
       browser_1.bootstrap(app_component_1.AppComponent); 
      } 
     } 
    }); 
    // ... 

webpack.config.js của tôi là khá đơn giản như sau:

var webpack = require('webpack'); 

module.exports = { 
    context: __dirname, 
    entry: "./app/boot.ts", 
    devtool: 'inline-sourcemap', 

    output: { 
     path: __dirname + "/dist", 
     filename: "bundle.js" 
    }, 

    module: { 
     loaders: [ 
      {test: /\.ts$/, loader: 'ts-loader'} 
     ] 

    } 
}; 

Can bất cứ ai sửa chữa cho tôi? cảm ơn.

Answer 1

Theo đề nghị của @Ron

Nếu bạn đang sử dụng Webpack để gói ứng dụng của bạn, bạn phải transpile mã của bạn để commonjs. Giải pháp là thay đổi module thành commonjs trong tsconfig.json của bạn.

// tsconfig.json 
"module" : "commonjs" 

Dưới đây là danh sách các kho hạt giống cho angular2 sử dụng webpack có thể hữu ích

• ng2-webpack-play bởi @ pkozlowski-opensource
• angular2-webpack-starter bởi @ gdi2290
• ng2-webpack bởi @ocombe

Ngoài ra, tôi khuyên bạn nên xem Modularity and Packaging for Angular2 Applications bởi Pawel từ AngularConnect2015