Perché il pacchetto Web è stato raggruppato come "System.register"

Question

Sto provando a sviluppare un'app angular2 utilizzando il webpack, ma alla fine si verifica un errore nella console del browser: Uncaught ReferenceError: System non definito.

Quando ho guardato negli js in bundle, l'ho visto sta usando System.register come di seguito:

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

miei webpack.config.js è piuttosto semplice, come di seguito:

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 qualcuno ha risolto per me? Grazie.

Answer 1

come suggerito da @Ron

Se stai usando Webpack per impacchettare l'applicazione è necessario transpile il codice per commonjs. La soluzione è di cambiare module in commonjs nel tuo tsconfig.json.

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

Ecco un elenco di depositi di semi per angular2 utilizzando webpack che può essere utile

• ng2-webpack-play da @ pkozlowski-opensource
• angular2-webpack-starter da @ gdi2290
• ng2-webpack da @ocombe

Come extra, ti consiglio di guardare Modularity and Packaging for Angular2 Applications di Pawel da AngularConnect2015