Angular-CLI Meets Webpack

the single greatest improvement since ‘ng g’

A few months ago I tried my hand at the angular-cli. It was nice but it had enough deterrents to keep me away until the team worked some things out. Foremost was the incredibly slow app refresh during development due to SystemJS loading every file dynamically —definitely a deal breaker.

All the gains made with scaffolding efficiency were quickly offset by the painfully slow app refreshes and the 5 step process to add 3rd party npm modules. So I backburnered it in favor of Angular 2 Webpack seeds.

Then in skunkworks like fashion, a branch mysteriously appeared in the angular-cli repo covertly named, “webpack”. There was hope!

Oh what a delight to see the team moved the build system from SystemJS to Webpack!!

Why did the CLI team move to Webpack?

Fast

Improved Livereload reliability

Community Adoption

Vast Loader & Plugin Ecosystem

New Improvements

Here are the highlights that we’ll review.

Fast iteration reloads

Simplified 3rd party module configuration

Tree Shaking — compile bundles with all unused code removed

Inject External Custom Styles & Scripts

Webpack 2.1.0-beta.21 pre-configured out of the box

BOOM!!

Kudos to the cli team for making a bold improvement! This was a pretty large undertaking and there remains a lot of testing before the team is comfortable labeling it “beta”. Regardless, I’ll bask a while in the single greatest improvement to angular-cli since ‘ng g’.

Same Great Features

The angular-cli still has the same great scaffolding features. So we’re not here to re-explore generator commands. Instead we’ll review the main improvements Webpack brings to angular-cli — speed, convenience and ease.

Since the Angular Material 2 library has made some great gains in recent weeks, I will review the new CLI improvements by busting out a quick Material 2 demo app.

I’ll also take this opportunity to help with the impedance mismatches in the Material 2 Getting Started guide (as of this writing), brought about by the Webpack switch. Plus there are few md-[component] workarounds to address that naturally occur when mixing two alpha efforts.

We’ll build a quick Material 2 demo with a few md-components using these libraries:

angular-cli beta-11 (circa: “1.0.0-beta.11-webpack.2”)

(circa: “1.0.0-beta.11-webpack.2”) Material 2 (circa: “2.0.0-alpha.7–4”)

You can access the code samples and demo project here: