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

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
"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):

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:

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

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

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.

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.

How to use TypeScript Enum types, especially with Angular 2

Let’s assume you have the following enum in TypeScript:

An enum is just an object. Your enum is written something like this in JavaScript:

The benefit from typing is very limited in enums. Let me explain…

A very common thing you might want to do, is convert a string to an enum. This line is valid:

But it’s not useful, because

So, you should always store your values as numbers, which you can obtain as follows:

How do you convert a string to an enum in TypeScript?

This makes the previous comparison work:

Now, a couple questions remain:

How to convert a TypeScript enum value to a string?

How to get all the values of a TypeScript enum type?

Gotcha: Undefined enum type in Angular 2 views

If you write this in your Angular2 template:

It will fail, because it doesn’t have access to imported types (it gets executed later by AngularJS).

To make it work, your component will need to have a reference to the enum type / object, something like:

Runnable Demo With All Solutions

Here is an example that explains everything I pointed in here:

(Click the button at the top right to see it in action)

This post was inspired by this StackOverflow answer.

Solving Common Angular 2 HTTP Pitfalls: No map() Method for respose.json() & No Http Provider

I had so much fun helping mentoring a couple dozen developers yesterday in SSW’s Angular Hack Day here in Sydney. It was an awesome day from organizers to students.

This post is about the Number 1 problem all students seemed to have, and how to solve it.

The Most Common Problem: map Not A Function

When you make an HTTP request to a JSON endpoint, you map the response text to a JSON object, like this:

When the students ran their own code, which more or less looked like the segment here, they got an exception like this:


The reason for this is that the result of the HTTP call is an Observable. An Observable has nothing defined by default except subscribe. You need to import any other operator manually like

If you rely on autocomplete in your editor, and it shows a couple of versions for every operator, remember to choose the with with “/add/” in it. As this is the file that add the operator to the Observable definition.

You cannot add * unfortunately.
Update: You can import all RxJS operators in one call like this:

Single Include

You can also move the import(s) from every TypeScript file to the main entry point of your app, likely the file with the bootstrap() call.

Depending on how you set up your compilation and module loader, the entry file import might not work. It works with the SystemJS use you see it in the official Angular 2 quick start though.

Obviously, if you think the entry file include is a hacky way, just add the imports on top of the each file that uses them.

Update for gulp-typescript Users

I found a case where a user on StackOverflow had the same problem, even though he had the correct imports in the bootstrap file. The problem was after upgrading to Angular 2 beta 17.

In this particular case, the user reported that he was using gulp-typescript version 2.12.0. He reported that the problem went away by just upgrading to the very next version, gulp-typescript version 2.13.0.

Oh, and make sure you are using TypeScript 1.8+ also to be safe.

Another Problem: No Providers for Http

Some students also were getting a different error:


The forgotten part this time was adding the Http providers to the bootstrap. Something like this:

One last tip: Make sure you included the Http file in your scripts if you are starting from a quickstart start or so. As the Http module is included in a separate file in Angular 2.

A Quick Shoutout to Dan Wahlin

During the hack day, students asked me for a good example that shows the solution above. It was not in the official examples (the 5 minutes quickstart, and the Tour of Heroes).

The best I have found on Github is Dan Wahlin‘s Angular 2 JumpStart sample.

It’s named similarly to his Udemy course for Angular 1. I remember his AngularJS in 60-ish minutes YouTube video was a key block in building my Angular 1 learning when I first started it back in 2013.

Thanks for everything, Dan :)

Different People, Different Challenges

With various people hacking away, I got to see different problems that people had getting up and running with Angular 2.

For some people, just setting up Node was more challenging than it should be.

Some others had issues with the sample APIs they chose, because they didn’t have cross domain support (CORS), or returned XML by default and they needed to add an Accept header explicitly.

Some were wondering how to use RxJS to combine results form 2 separate HTTP requests (getting city weather from one, and information about it, or an image URL from another).

How About You?

All these variations got me pretty curious. What was the biggest blocker you had when trying to play with code in Angular 2?

What were your own challenges?

Tweet them to me on Twitter (just mention @Meligy), or just write it down in a comment below.

Solution for when AngularJS is not working at all, & angular.bootstrap() throws weird errors

I was working on a small AngularJS demo today, when I found the following is not working:

As you can see that’s just an empty Angular app. I was trying in Plunker, I tried JSBin and same. I was very anxious.

Looking at the console, I saw an “undefined is not a function” error, deep in some AngularJS code, and a few other quirky errors as well about minified code (although my version of Angular wasn’t minified).

I couldn’t tell what was going on, till I did some googling, and found something worth sharing here.

Turns out the bootstrap call needed to be after the DOM content has been fully loaded, this is the “ready” jQuery event if you use it, or the “DOMContentLoaded” event in plain JavaScript.

So, to make this line work, all I needed to do is write the following:

If you are using jQuery, you could also alternatively write:

Just passing a function to jQuery will be equal to $(document).on("ready", myFunction).

Sharing this here to save someone else the confusion I had!

Video: My Take on Angular 1.3+ (1.x) and Angular 2.0


Every 2 or 3 months, each local state team in my company, Readify, helds a night usergroup-like event, or a BarCamp. It’s an opportunity for consultants to share what they find useful, what they learned recently, or just practice public speaking in front of a friendly and supporting group.

I haven’t spoken at Readify’s Sydney BarCamp before. I really wanted to. So, I talked about my findings on the whole Angular 2.0 topic, and my conclusions on how this affects Angular 1.x developers.

I hope it helps you if you are in a similar situation.

By the way, if you like the idea of BarCamp, and want are interested in being part of this team, check out Knock Knock, even if you don’t currently live in Australia :)

How To Make Your First Windows Server VPS Secure In Just A Few Easy Steps

Today a friend (Amr Eldib) asked a question on Facebook that I think a few of you may have as well:


I’ve never setup a Virtual Private Server out in the open on the Internet, and I was wondering how safe it would be?

I prefer Windows, because it’s what I know.

It’s intended to run all kinds of applications, blog, CMS, Wiki, file sync, photo storage, etc.

From your experience, what safety/security steps I need to pay attention to?

Does the security of the server depend on the applications or the OS, or both?

I had a relatively short and simple answer to this question. I’m sharing it here with you pretty much as-is.

My Answer

If you are looking for affordable host, I’ve always recommended SoftSys Hosting.

For most hosts, the server is locked down by default. Any OS will be subject to vulnerabilities though, so, make sure you have latest Windows updates (it’s OK to have Windows 2008 R2 instead of 2012 R2, might be better actually due to less resources it uses, any OS that’s not out of support should be OK).

The most common attacks are usually random attacks, the attacks that go to random servers trying to open default port numbers, default usernames and weak passwords, and try to identify / guess what software is installed on the server, and use the known vulnerabilities that exist in that software, in the hope that you didn’t have these patched.

Things you can do are removing/disabling accounts with default names like Administrator, etc., changing default port numbers for things like SQL DBMS and FTP / SSH if you use any, making sure things like SQL DBMS do NOT allow remote connections in the first place.

Also the application can be a thread. For example, hMailServer uses OpenSSL, so you need the latest version to make sure you don’t have OpenSSL hole. WordPress now installs minor/security updates automatically but you always want to check, and maybe even be careful what plugins you use.

Apply same rule to similar software packages.

Meligy’s AngularJS and Web Dev Goodies – Issue 3

Hey there,
Welcome to Issue 3 of the newsletter. If you want to check the previous editions, you can go to You can access a particular issue like, for Issue 2 you go to

This time I have played a bit with the schedule and the order of sections. The idea is to experience different ways and hear your feedback on what works better. either on twitter or by email (simply replying to this message).

SEO — News

Video: Google will render JavaScript by end of the year
During AngularJS NYC usrgroup for September 2014, Brad Green, a Google engineering manager working on Angular.JS among other things said that Google crawler will render all JavaScript by the end of this year, and their should be tooling for checking that in Google Webmaster Tools as well – Discuss on reddit.

Angular.JS — Libraries

bind once for Angular.JS < 1.3
A set of directives that allow you to bind values to the UI only once instead of watching for model changes to update the UI. This is particularly useful when you have a long readonly list inside ng-repeat where most properties are unlikely to change until the entire list changes (and then the whole template will be re-rendered).
The concept is now native in Angular.JS 1.3, and there are other libraries that try to enhance it, like angular-watch-require and angular-watch-when.

If you use require.js and want to have lazy-loaded modules with it, there are several tries out there that get that sort of thing done. If all you want though is just lazy loaded modules that are loaded and bootstrapped on the fly when a certain route tree is matched (like areas in ASP​.NET MVC Areas or Rails Namespaces). Might be good for large Angular.JS apps. It also has been mentioned on the Adventures in Angular podcast.

JavaScript — MVC Frameworks

MVC Architecture
A very nice article about how we don’t exactly implement MVC as 3 parts, Model, View, and Controller. We usually had other parts too. I think the closest way to how I implement MVC is the last picture in the article.

Why I Don’t Want Your JavaScript Framework but I Love You
If you are in the mood of reading about what homework you may want to do before you actually go ahead and use a JavaScript framework, this could be a good read.

JavaScript — Ember.JS

I have a few links for Ember.JS this time that it will feel like I’m moving to it, although I’m not, I still find its innovation very inspiring as you’ll see below.

Mistakes I Made in My First Ember Project
If you have been following the newsletter for a bit, you know I value knowing how other SPA/MVC/MV* frameworks solve the same problems that Angular.JS solves. I think this knowledge is beneficial regardless of the framework because many of the issues have equivalent in every framework, and thinking about different approaches can really help you get the most out of whatever framework you use.

Event Delegation in Ember.JS – StackOverflow
When you use ng-click inside ng-repeat in Angular.JS, it doesn’t usually set one event handler for the parent of the element and use event bubbling to set it, although you can do it yourself via a directive. It was interesting to find out randomly via StackOverflow that event bubbling is how Ember.JS works by default!

Building rich single-page application with Ember.js
Historically, one of the things that stopped many people from learning Ember.JS was how hard it was to get to understand its pieces. This is now changing a lot (or may I say changed?) with better documentation and more great guides, like this one, which was very simple and lovely to browse.

JavaScript — ES6

Traceur is Awesome! … but still a little Painful
Don’t be turned off by the title. Traceur is a nice tool from Google to compile ES6 code to ES5 code that can run in any ES5 browser (most browsers, and even older ones can be polyfilled). This post describes what the experience is like when using it (.NET people might find using TypeScript a better option for its VS integration though, although it’s not not exactly ES6, you can sometimes go even crazier with some F# mix).

JavaScript — Debugging / Performance

Video: Advanced Debugging Techniques with Chrome
A must see video of what goodies exist in Google Chrome dev tools (including some of the relatively new features like new enhancements to emulation), this is probably a must-watch video for you. I have been using the tools for years and found quite a few things I didn’t know before.

JS Parse and Execution Time
When you use a framework (quite often you should), there’s only so much you can control in terms of performance. This article examines the time it takes to parse and execute jQuery on so many browsers and devices. It has some interesting observations, like how the total times vary like crazy between different devices, and how device hardware is still the major determinator is hardware rather than software (OS or browser).

Security – HTTPS

I think we are in the (very?) early days that will lead to all websites running HTTPS by default. Apart from privacy concerns, SCARY attacks, there’s also industry leaders push and relative ease of implementation. But it’s not something that everyone needs to worry about just yet.

SSL and SEO: Don’t Panic
There are a few messages that I want to send from sharing this:
1. Google announced they will consider SSL as one of its many ranking factors
2. This doesn’t mean you should freak out if you are not using SSL (the point of the link above)
3. But SSL is worth it anyway, as in most recent hardware and software (including IIS 8 and maybe 7.5) it’s already fast (the traditional old concern about SSL, apart from cost for tiny websites).

Slides: Is TLS fast yet?
If you are thinking about implementing HTTPS and worried about CPU performance, your server documentation documentation should tell you whether there are significant performance overhead (I checked some common ones and they were all saying nothing to worry about). This presentation helps assure the same idea.

Cloudflare – Introducing Universal SSL
The well known CDN provider Cloudflare announces availability of SSL services for all their plans, including their free plan. They serve files in HTTPS, and can be configured to pull assets (as source files to publish on the CDN) from HTTPS URLs as well. Here’s a basic write up of how to use it.

Security — General

Waxing Poetic with SwiftOnSecurity
I didn’t plan to make this newsletter mostly about security as it ended up being, but this story that reminds us of how some users can be so vulnerable in a way we can’t blame them for, is quite a good read.

Microsoft — Windows 10

Video: Windows 10: Enterprise Features & Core Experience for Businesses
You must have seen a ton of Windows 10 videos already, for me, this was pretty much the deepest one of them that related to me as a developer and showed the philosophy of the product.
One fun moment in the beginning of the video was giving a reason for the name, Windows 10 (instead of Windows 9), apart from considering Windows 8.1 as 9 (if you want) which the video didn’t suggest, it said that the main idea was calling it Windows One, similar to Xbox One and One Drive, etc. Windows One was taken as Windows 1, so they went for Windows 10! (if this is silly still – I think it was meant to be more funny than true-, I promise the rest of the video isn’t).

Video: Scott Hanselman Detailed Windows 10 Tour in just 8 Minutes
Scott is very well known in the ASP​.NET developer community as his work at Microsoft is mainly around that community and ASP​.NET MVPs, etc. He is a great person and speaker. His Windows videos are not something that he does for work, which makes them even greater and more realistic.

Windows 10 Insider Program / Preview
Just in case you missed the URL to get the technical preview! I have heard a few positive comments from some of those who played with it, especially on a Surface laptop (of course).

Apple / IPhone / iOS — Quick Links

iPhone 6 Screens Demystified
Also check their iPhone resolutions guide

iOS 8, thoroughly reviewed
Very long / detailed review

Video: Steve Jobs introduces WiFi to the masses with a hula hoop!

JavaScript — Quick Links

Promises in the Google APIs JavaScript Client Library
Google’s JavaScript SDK now return promises, for easier integration into promises-all-the-things!

Bye Bye Javascript Promises!
async/await like code in JS?

A JavaScript library to generate responsive stylesheets.

Explorations In Automatically Fixing JavaScript Linting-errors
By Addy Osmani from Google

Calculating Standard Deviation with and Array.reduce, In JavaScript
A bit of a different challenge

More from @Meligy / GuruStop

Thanks a lot for making it that far. If you like what I brought you, let’s connect in even more ways!

Follow me on twitter — @Meligy

Check The Newsletter Archive —

Get friends to receive the newsletter —

Remember that you can just reply to this email or mention me on twitter to tell me what you feel needs to change in next issue.

Until then,

AngularJS Video: Create A Tree Hierarchy Using Recursive Templates & ng-include

Hello again and welcome to another Angular.JS video. This time I talk briefly about templates in AngularJS and the ng-include directives, and how to combine them to create recursive templates that can be used to model any number of tree levels.

Here’s the video. Check the code snippets belows:

The Code

In this demo, I used a dummy controller just to have a model to work on, the controller looks like that:

The obvious magic comes from the HTML, here’s the relevant part:

You can see the result below:

AngularJS Tree Demo

I hoped you liked this one, and until next video.

Allow Me To Share My Toolset Choices for Developing On .NET

There was a question in a tech facebook group I co-manage about what tools you’d use if starting a new project today.


I don’t know for sure. It depends -of course- is the expected answer. For example, there’s some idea I had I mind I considered using MongoDB or CouchDB for, while still using .NET, and then I wasn’t sure if I go extra mile in DB I’d go for Node or Rails as well or would prefer .NET for my personal productivity. I also often use Node/Bower when checking libraries with many dependencies.

So, for this question, I thought what tools I might use in a company project. Thinking back, I found that most tools I use now are good enough for what they do. So, I thought I’d list these.

These tools are my personal experience though. While some of them are widely adopted in Readify, some others may have been specific to some clients or Readify teams I worked with. Every team is free to choose the tools that work best for them and make it easier to deliver high quality deliverables in sensible time, so, even if you are at Readify, your mileage may vary…

The Tools

Server Side Web


  • SQL Server (or SQL Azure, although I don’t like SQL Azure, because it’s not compatible with some scripts generated from SSMS, which I sometimes use to generate migration scripts)

  • DbUp for DB migrations (there are some other nice options now)

  • Special SQL views + Web API OData + MS Excel for reporting

Client Side Web

  • Angular.JS on the client when I have the choice, Knockout.JS and jQuery UI (being deprecated now) at some big client I keep going back to every few gigs

  • LESS for CSS, or SASS (SCSS) when the CSS is handled by one of our favourite design agencies

  • Chrome devtools for web debugging (obviously), unless it’s IE issue of course.


  • Phonegap (most just the open source part of it, Cordova) and Ratchet CSS framework (considering alternatives, like TopCoat) for mobile development, with Angular.JS

  • Considering Xamarin as their work seems to be VERY cool, and I recently get access to their stuff via my company (OT: Also considering Neo4j DB for similar reasons).

IDEs and Text Editors



Internal Communication

  • Several kinds of wikis used by different clients, often with OneNote

  • HipChat for team communication, sometimes Skype and/or Lync as well

  • AnswerHub (Stackoverflow clone) for internal questions forum where I can safely quote client sensitive information in my question

  • Yammer for internal company social network

How about you?

What tools do you you use when developing?

Let me know in the comments, via email, or on twitter!

Enforcing ASP.NET MVC Conventions With Unit Tests, Or Solving The AJAX HTML Redirect To Login Page Problem

This blog post is about an ASP.NET MVC workaround we implemented in a previous project. We solved the problem by enforcing using a class that extends one of ASP.NET MVC classes, which in itself created another problem, as new developers joining the project may always use the old class. The solution to this problem was not something that I invented, but it’s also not a very common practice.

So, if you are interested, here’s the entire story…

Detecting Session Timeout In AJAX Requests

We wanted to solve a problem where in an AJAX heavy ASP.NET MVC application, if the user triggers an AJAX action after staying inactive for longer than our application timeout, the call to the controller action, which normally gets a JSON response, would instead get the HTML of the login page.

This is a known issue in ASP.NET (particularly System.Web). A feature that’s on by default is returning a redirect to the login page instead of a HTTP Unauthorized Status code (401). After the redirect the response returned is a successful (HTTP Status Code 200) load of the login page. That means even our Angular.JS error interceptors (or jQuery handlers, etc.) don’t notice there was an error.

A fix for this was turning this feature off. We inherited the Authorize attribute as below:

SuppressFormsAuthenticationRedirect is the property that disables the login redirect. Microsoft set it to false by default so that it’s backwards compatible.

ASP.NET MVC doesn’t recognize AJAX requests through Request.IsAjaxRequest() via Accept header or so. It does via checking X-Requested-With header. Most AJAX-capable frameworks like jQuery and others offer a way to intercept all requests and add extra headers, for example, in that app, we configure Angular.JS to include the header with some code similar to this:

Enforcing The Convention

The obvious problem with the previous solution is that we are ignoring The Power Of Defaults. Any other developer who may join the project needs to know that using Authorize is a no-no, and even for old devs (myself included),
it’s very easy to just forget and use Authorize not AuthorizeRedirect just out of habit.

Solving this problem was quite easy though, we added the following test to our Unit Tests project:

I hope the code is self explanatory. We check the web project assembly for all ASP.NET MVC Controllers, then we check the Controllers and all their Action methods for existence of the AuthorizeAttribute. We filter those that use the correct attribute (AuthorizeRedirectAttribute), and we Assert that there are no the no Controllers or action remaining, otherwise, we tell the developer which Controller or Action needs to be fixed, and how to fix it as well.

Room For Improvement

The drawback of this is that our Unit Test project had to reference the ASP.NET MVC assemblies and gets more stuff than most tests should need. We can overcome this by moving our “convention” tests into another project completely, but for this project the conventions were very few and it seemed fine.

Of course the same method can be applied to any other convention you enforce in your project. One obvious example is ensuring all Controllers inherit from a custom base Controller class instead of the ASP.NET MVC class directly. I know people who already do this, as I mentioned in the opening the technique is not new by any means, but it’s worth even more popularity.

Speaking of improvement, the code for this test class was optimized a bit while writing this blog post, there is always room for improvement :)


In case you were reading the code carefully, the IsNullOrEmpty() method I used in assertions is a custom extension method we had in the project, a very simple one as you may expect:

And That’s it!

I hope you found the technique useful if you haven’t used it before, or found the post a good place to reference it to those who didn’t.