我正在尝试使用 webpack 开发一个 angular2 应用程序,但最终在浏览器控制台中出现错误:Uncaught ReferenceError: System is not defined。
当我查看捆绑的 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
。解决方案是在您的 tsconfig.json 中将 module
更改为 commonjs
。
// tsconfig.json
"module" : "commonjs"
这是一个使用 webpack 的 angular2 种子存储库列表,可能会有帮助
- ng2-webpack-play通过@pkozlowski-opensource
- angular2-webpack-starter通过 @gdi2290
- ng2-webpack通过@ocombe
额外的,我推荐你看Modularity and Packaging for Angular2 Applications来自 AngularConnect2015 的 Pawel
关于angularjs - 为什么 webpack 打包为 'System.register',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35075130/