Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SystemJS vs Webpack for Angular 2 applications

We are starting a new Angular2 SPA and I am looking into whether to use SystemJS as described in the Angular Quickstart tutorial (https://angular.io/guide/quickstart) or Webpack (https://angular.io/docs/ts/latest/guide/webpack.html).

Researching this online, people appear to be moving from SystemJS to Webpack. For example, the "Angular CLI" project from Google: http://react-etc.net/entry/angular-2-cli-moves-from-systemjs-to-webpack

Webpack not only handle modules but also provides a way to package the application (concat files, minify/uglify files, ...). The new version also provides "tree shaking" (remove dead/unused modules from the final build).

With SystemJS, we would still need to use gulp (or something else) to build the app.

If you are starting with a new Angular 2 app, which one would you use?

like image 771
bka Avatar asked Sep 23 '16 15:09

bka


People also ask

What are differences between SystemJS and Webpack?

With SystemJS its sole responsibility is the lazy loading of files so something is still needed to minify those files, transpile those files (e.g. from SASS to CSS), etc. These jobs that must be done are known as tasks. Webpack, when configured, correctly does this for you (and bundles the output together).

What is the purpose of SystemJS?

SystemJS is a hookable, standards-based module loader. It provides a workflow where code written for production workflows of native ES modules in browsers (like Rollup code-splitting builds), can be transpiled to the System.

What is SystemJS in angular?

systemjs.config.js. It contains the mapping information of files, which are used for developing Angular application. It tells the SystemJS module loader where to find modules referenced in Angular component imports statements. tsconfig.json.


1 Answers

I'm using angular-cli for 6 months now, and the change to webpack was the best decision they could make. It builds faster, is so much easier to work with than SystemJS (almost no configuration on my part), supports bundling, tree-shaking, lazy-loading and so much more.

The tool is getting better every month, I have 3 production apps right now.

You can't go wrong with angular-cli if you don't want to be bothered with losing time configuring SystemJS or any other bundler.

like image 170
Alexander Ciesielski Avatar answered Nov 15 '22 12:11

Alexander Ciesielski