You have heard the rumour, that Angular CLI is going Webpack. And it’s true. The CLi is replacing broccoli + systemjs with Webpack.
Update 1 (See Update 2 for latest)
The Webpack feature has landed in master GitHub branch!
It’s not on NPM yet (subscribe to my newsletter to get updated when it’s), and it’s in active development.
So, you might still find benefit in trying it out directly from GitHub sources.
The Angular CLI has landed on NPM, but you need to call it in a special way:
If you installed Angular CLI before, go
Then to install the Webpack version:
When you run `ng new some-app`, and go inside it and run `ng serve`,
if you might get error like:
To solve this error, you can go to `package.json`, and change
to `”angular-cli”: “1.0.0-beta.11-webpack”,`
(remove the `^` from the version)
Then run `npm install`. It should work after that!
You can also skip the initial NPM install using the param `–sn` (skip npm):
Then go fix the
package.jsonfile, and run
npm installmanually, so it only runs once.
Git or Npm?
Depending on how safe you want to go, you might find the master branch of the CLI often having features that are very interesting. This is always the case of course, but it’s more severe as the Webpack move in active as it’s now.
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.jsfile and systemJS config, you just call
require("dependency");and be done with it; where
- 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:
Which makes the
ng command available anywhere.
Instead, of that, you need to do this:
Here’s what this will do:
- Clone Angular-Cli
and checkout the
Note that the same method can be applied with the
webpackbranch where this feature originally landed.
You just need to call
git checkout Webpack(assuming a branch named “webpack”) before
This should automatically track the remote
webpackbranch (as in
origin/webpack) if you have a fairly recent version of git.
Use the package information in
package.jsonfile inside the repository to build and globally install
angular-cliNPM 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:
Let’s use it!
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:
Note the difference:
- When we were inside the git repository and want to use as a global depdendency, we called
npm linkwith 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-cliis the name of the package we globally linked before.
Linking can now happen automatically by changing your `ng new` command to:
After that, you should be able to run the application:
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:
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.
Let me know if you enjoyed this post. Say hi on twitter, and sign up to my article updates newsletter.
Bonus Content: Using jQuery
After this post got a bit popular, someone asked me about getting jQuery working with this setup, which showed a particular edge case around protractor and jQuery conflict. Although I wouldn’t generally recommend using jQuery and Angular 2, wrote about how to workaround this conflict, and how to get jQuery to work with Angular CLI and Wepack here.
How did I learn that?
As a bonus for coming here, I'm giving away a free newsletter for web developers that you can sign up for from here.
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 (4.x/MVC5 and Core), and other fullstack developer goodies.
Take it for a test ride, and you may unsubscribe any time.
You might also want to support me by checking these out [Thanks]: