我正在尝试使用webpack开发angular2应用,但最终在浏览器控制台中显示错误:Uncaught ReferenceError:未定义系统。
当我查看捆绑的js时,发现它正在使用System.register,如下所示:
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非常简单,如下所示:
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'} ] } };
谁能为我修复?谢谢。
正如@Ron建议的
如果您使用Webpack捆绑应用程序,则必须将代码转换为commonjs。解决方案是更改module为commonjstsconfig.json中的。
commonjs
module
// tsconfig.json "module" : "commonjs"
这是使用webpack的angular2种子存储库的列表,可能会有所帮助
另外,我建议您观看AngularConnect2015的Pawel撰写的Angular2应用程序的模块化和打包