Use Angular 2 CLI with Webpack Directly from Github Source Code

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.

Update 2

The Angular CLI has landed on NPM, but you need to call it in a special way:

If you installed Angular CLI before, go

npm unlink angular-cli
npm rm -g angular-cli
npm cache clear

Then to install the Webpack version:
npm install -g angular-cli@webpack


When you run `ng new some-app`, and go inside it and run `ng serve`,
if you might get error like:

No angular-cli-build.js found. Please see the transition guide:

To solve this error, you can go to `package.json`, and change
`”angular-cli”: “^1.0.0-beta.11-webpack”,`
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):

ng new my-app --sn

Then go fix the package.json file, and run npm install manually, 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.

To check the difference, see the release change log vs the git commit log.

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:

npm install angular-cli -g

Which makes the ng command available anywhere.

Instead, of that, you need to do this:

git clone
cd angular-cli
npm install
npm link

Here’s what this will do:

  • Clone Angular-Cli and checkout the webpack branch

    Note that the same method can be applied with the webpack branch where this feature originally landed.

    You just need to call git checkout Webpack (assuming a branch named “webpack”) before npm link.
    This should automatically track the remote webpack branch (as in origin/webpack) if you have a fairly recent version of git.

  • 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
git pull
npm install
npm link

Let’s use it!


ng new sample-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:

npm link angular-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.

Easier Way

Linking can now happen automatically by changing your `ng new` command to:

ng new sample-wp --link-cli

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

ng serve

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:

ng build -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.

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.

Share With Friends:

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]:

  • Meir Shahar

    Thx for a great post. I tried it and it works! I saw your second post regarding jQuery as well. I’m still stuck with the require(‘dependency’) thing. Can’t figure out where to put it (in what file/location). Can you please tell us? As an example, where would I put require(‘ng2-bootstrap’) dependency to use it?

    Btw, your mailing list registration fails for some odd reason, the error I get after submitting my email is:
    The resource submitted could not be validated. For field-specific details, see the ‘errors’ array.

    • Hi Meir,
      Thanks for the comment.

      Let’s talk about ng2-bootstrap first. Here’s how to get it working:

      • Meir Shahar

        Thx! It worked. My mistake was that I thought I needed another require, since the ng2-bs page says you need to reference the js file in your index:

      • Meir Shahar

        And aha! I found the original problem. it is one of the ‘exotic’ things that if you’re lucky find in under 2 hours and remember when you run to it again. it seems that webpack (or some other component) is sensitive to spaces before the ‘:’ in the meta info part so while:
        templateUrl: ‘some.component.html’
        will work fine
        templateUrl : ‘some.component.html’ (note the extra space before the ‘:’
        will fail and say it can’t find the file.

        • Oh, that’s a crazy bug!

          I have confirmed it and created issue here:

          • Meir Shahar

            it is crazy. Saw the bug, actually it happens not only in the css part but also in the templateUrl.
            And here is another crazy one, the all have an offset. Put a ‘debugger’ in your ts code and see that your devtools stops somewhere else, or try to set a break point in the devtools and see that it is ‘ignored’. Does it happen to you as well?

          • Meir Shahar

            Just noticed it was already reported:

    • Regarding the newsletter, which form did you use? A popup, the link in the post itself, the post after the form, or the one in the sidebar?

      Thanks a lot.

      • Meir Shahar

        Thank you Mohamed. The one I’ve tried is the input box on the top right of the page, with the red submit button saying “stay up to date”

  • Craig Doremus

    Is there anything you have to do to undo this install once the official angular-cli with webpack gets deployed to npm?
    Thanks for the post.

    • You can just unlink / uninstall the CLI for both the global and local (project specific) installs, then clear NPM cache (that’s part of the standard upgrade instructions), and re-install the CLI globally and into the project.

  • peterjp80

    Wonderful post, thank you! I’m a bit confused and was hoping you’d have some advice. I installed angular-cli@webpack and got my project all setup. When I run ng serve, I see “webpack: bundle is now VALID” and I see that the site works. However, there’s no webpack.config.js file anywhere in my project (there’s also no webpack in my devDependencies in package.json). Where can I find the configuration that ng serve is using for webpack?

  • Pingback: cpns kemenkumham 2017()

  • Pingback: Dungeon()