A project should have a bundler, regardless of the technology stack. A bundler is software that bundles your application code along with its resources into a minimized, zipped bundle that can be easily deployed on the server (at its most basic form).

There are many bundlers out there, most widely used are Grunt, Gulp and lately, Webpack. They each take a different approach to fulfill the task at hand – but Webpack really stands out from the crowd.

While Grunt and Gulp simply bundle all js files and all assets, Webpack maintains a dependency tree (by scanning import statements) and that allows it to only bundle resources and js files your code actually uses, as well as identify chunks of code – using code splitting – and bundle chunks together for a more efficient bundle.

The angular team went the extra mile and created anguar-cli – a very powerful tool that goes way beyond the simple bundler or generator.

  • It has Webpack under the hood, already pre-configured, so you enjoy the benefits without the hassle of configuration.
  • It is very easy to use with a set of cli commands, the main ones are:
    • ng new – create a new angular-cli enabled project
    • ng init – initialize the current project for angular-cli
    • ng test – run all unit tests (using karma/jasmine stack)
    • ng e2e – run all protractor e2e tests
    • ng serve – will run your app in a local web server
    • ng build – will compile TypeScript code, bundle the dependency tree and dump it to the dist folder.
    • ng build --prod – will also minify, zip, hash etc.
  • It comes with a code generator – you can use it to create skeletons of the most common ones (Components, Directives, Services and Pipes) by simply using the cli command ng g <type>.

Now you are probably wondering – how can I modify the underlined Webpack configuration? After all, the only constant thing is change…

Well, fear not! You have full access to project configuration files like karma.conf.js, protractor.conf.js, tslint.json, tsconfig.json and package.json.

More over, you can also modify angular-cli configuration using the angular-cli.json file, where you have full control of application root folder and configuration files relative locations, as well as specifying css and js files you want loaded into the index.html file as globals (bootstrap and lodash to name a few).

But wait! It’s not all!
When a new Angular2 version is released – you can use ng init to get a list of source files that should be refactored, and the proposed refactor (!!!) which you can accept, reject or modify.
While this was especially beneficial for the release candidate days, when different RCs introduced breaking changes, it is still a very powerful feature.

And don’t forget – angular-cli is updated regularly with Angular2 versions, with the latest version supporting Angular 2 final.