I am trying develop a angular2 app using webpack, but it end up with an error in browser console say: Uncaught ReferenceError: System is not defined.
When I looked into the bundled js, I saw it is using System.register like below:
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);
}
}
});
// ...
My webpack.config.js is pretty simple as below:
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 anyone fix for me? thanks.
Bundle: Produced from a number of distinct modules, bundles contain the final versions of source files that have already undergone the loading and compilation process. Bundle Splitting: This process offers one way of optimizing a build, allowing webpack to generate multiple bundles for a single application.
Webpack: Webpack is a static module bundler used for JavaScript applications. Since webpack understands only JavaScript and JSON files, It transforms front-end assets such as HTML, CSS, and images into valid modules if the corresponding loaders are included.
Webpack is a free and open-source module bundler for JavaScript. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included. Webpack takes modules with dependencies and generates static assets representing those modules.
There are four basic concepts in webpack: entry , output , modules and plug-ins . These configurations are added in webpack.
As suggested by @Ron
If you're using Webpack to bundle your application you must transpile your code to commonjs
. The solution is to change module
to commonjs
in your tsconfig.json.
// tsconfig.json
"module" : "commonjs"
Here's a list of seed repositories for angular2 using webpack that can be helpful
As an extra, I recommend you to watch Modularity and Packaging for Angular2 Applications by Pawel from AngularConnect2015
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With