Using Angular 2 CLI with Webpack TODAY | Living on the bleeding edge!

Datetime:2016-08-23 00:25:52          Topic: Webpack  AngularJS           Share

Link opens in new tab

Thanks for your support -- It does make a difference

You have heard the rumour, that Angular CLI is going Webpack. And it’s true. The CLi is replacing broccoli + systemjs with Webpack.

I’m not 100% sure of the exact reasons that convinced the team to go this way, but as an end user of the CLI, I expect a few benefits:

  • Easier inclusion of 3rd party dependencies in the build output.

    Instead of having to fiddle with vendor.js file and systemJS config, you just call require("dependency"); and be done with it; where dependency can come from local directory or NPM package, and can be any TypeScript / JavaScript file, or even a CSS / HTML / image file!

  • Easier tree-shaking

    Which means removing parts that are not used in your program from the build output. Angular is betting big on this (mostly via rollup.js library, but possibly via Google closure compiler in the future). Webpack has a few features built-in around this as well.

  • Easier (seamless) Webpack integration

    The current official Angular2 Webpack cookbook says you need to call require("some-name.component.html") in your component’s templateUrl , which is silly because it’s Webpack-only syntax.

    Having tried the Webpack version of the CLI, I’m happy to report that you don’t need to do that anymore.

How to use Angular CLI directly from Github?

So, now that we know why Webpack might be interesting to bring to the CLI, let’s talk about how you can try it even before it’s officially released. That’s if you feel adventurous and want to be on the bleeding edge of course!

Normally you install the Angular CLI npm package by calling:

npminstallangular-cli -g

Which makes the ng command available anywhere.

Instead, of that, you need to do this:

gitclonehttps://github.com/angular/angular-cli.git
cd angular-cli
gitcheckoutWebpack
npminstall
npmlink

Here’s what this will do:

  • Clone Angular-Cli and checkout the webpack branch

    This should automatically track the remote webpack branch (as in origin/webpack ) if you have a fairly recent version of git.

    Note that the same method can be applied with the master branch to use the latest Github master version of the CLI.

  • Use the package information in package.json file inside the repository to build and globally install angular-cli NPM package from the contents of the repository.

    To make sure this process succeeds, we installed all the dependencies the repo has. I’m not 100% sure this is needed, but to be safe.

Now when you run the command ng , it’ll come from the version you just downloaded via git. In the future, when you want to update this version you just:

cd angular-cli
gitpull
npminstall
npmlink

Let’s use it!

Run:

ngnewsample-wp
cd sample-wp

If you try to run ng serve or something similar now, you’ll get an error. This is because ng new downloads a version of the angular-cli into the newly created folder. This is the online version available on NPM directory not the one you have offline, so we need to switch to it.

Ensure that you are inside the new folder created, and call:

npmlinkangular-cli

Note the difference:

  • When we were inside the git repository and want to use as a global depdendency, we called npm link with no arguments.
  • When we were in a normal project folder, and wanted to replace the local folder version of the depdendency, we called npm link angular-cli , where angular-cli is the name of the package we globally linked before.

After that, you should be able to run the application:

ngserve

You’ll notice a new output that’s different from what you used to. This is webpack output.

The website will still be available at the usual port 4200. Go to Chrome and open http://localhost:4200 to see it. Modify the app component and see live reload working as usual.

Other things will work normally, like generating components, etc. Check the following command though:

ngbuild -prod

If you look at the generated output in dist folder, you’ll realise that it’s slightly different due to removal of systemjs.

The size is still quite big at the time of writing though, but this is the area we expect to see more love going to before Angular 2’s final release.

That’s it

Let me know if you enjoyed this post. Say hi on twitter , and sign up to my article updates newsletter.

Share With Friends:

P.S. Please help me out by checking this offer, then look below it for a special gift

Your Offer

Links open in new tabs

Thanks for your support -- It does make a difference

Your Gift

As a bonus for coming here, I'm giving away a free newsletter for web developers that you can sign up forfrom here or the form below.

It's not an anything-and-everything link list. It's thoughtfully collected picks of articles and tools, that focus on Angular 2, ASP.NET 5, and other fullstack developer needs.





About List