AngularConnect Videos & Free Angular 2 Router Book (Only for a few hours)

This is Meligy from I wanted to send you a very quick email to let you know about Angular 2 conference that took place in the last couple of days, Angular Connect.

The videos for the conference are already available on YouTube.

Check them out from here:

There are videos for each whole-day track of the 2 tracks 2 day conference.
There are also videos for each session starting to come out. Seems all Day 1 is there, and Day 2 coming eventually.

For browsing through the whole-day videos, you can use the schedule page as guide, or just watch the individual session videos as they come out.

The sessions page on the site has all the separate videos that came out, and all the slides that are announced on Twitter, etc.

Another option is wait for the next message from me, as I’ll email you later all the most important summaries from the conference and what I think is must-watch.

Until then!

Twitter | LinkedIn | StackOverflow


This tweet was posted about 12 hours ago:

Victor is from the Angular Router team, and he writes the best Angular tutorials on

Obviously this is only for less than 12 hours now, so get it quick.

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.

Where’s Angular 2 going after a couple of RC releases?


This blog post first appeared in my Web Developer Newsletter on June 16.
Look for the form to sign up to the newsletter below.

This is Meligy from GuruStop.NET. Just checking if you got the news, Angular 2 RC2 is out!

Here’s the official announcement – and the changelog

The big highlights for this release for me seem to be:

  • The first release of the template compiler
    It allows you to compile templates as a build step, and avoid loading the Angular compiler in runtime.
    The Angular team say this compiler is the most essential to marking Angular 2 as final release.
  • Simplifications to forms
    If you played with Angular 2 forms and find the syntax confusing / redundant like me, this is big news
  • A new rewrite of the router
    This rewrite seems better than the on in previous RC.
    The official blog says it has contributions from ui-router and ngrx/router
  • Some new features
    Namely the animation framework

By the way, I’m personally sticking to Angular CLI when trying newer versions of Angular 2.
If you are taking this route, note that you need to uninstall the CLI, and clean npm cache before installing a new version.

That’s it for me. How about you?

Have you been playing with Angular 2 yet?

Or still looking for a good place to learn it?

Write back to me and let me know :)


Angular 2 for Angular 1 Developers — Full Video of My DDD Sydney 2016 Talk

Whether you have been to my talk at DDD Sydney 2016, or we never met before, here’s the entire recording as I captured it on my machine.

I decided to just upload the raw file with minimum or no video editing, so that I can get it up as soon as possible.

Let me know what you think, and what you’d like me to talk about in future videos.

You can tweet at me — @Meligy, and I’ll reply back as soon as I see it.

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.

Fix TypeScript Autocomplete for RxJS Operators And Helpers In NodeJS

I have been working on a Node application, and wanted to use Reactive Extensions (RxJS). All previous interactions with it were in web apps that run in the browser after some SystemJS / Webpack massaging.

At first it looked OK. I could build an Observer, and subscribe to it. I tried to use some operators, and this is when I got stumbled.

The Problem

I had a sample Observable, and I wanted to call flatMapTo on it, but I couldn’t!

Autocomplete only showed the subscribe method, as below:


Just importing the specific operator file (which modifies the Observable interface and adds the operator method to it) didn’t seem to get the operator autocomplete (or successful compilation at times) to work.

I didn’t want to have to add each operator manually anyway, and this is Node not browser, I don’t have to be picky about imports (and again, it didn’t work anyway).


I was specifically trying map(), which I was able to get to work with ES2015 targeting (I’m working with Node 5, which has fair ES2015 support).

But that’s because an Observable is also an Iterable object that you can loop over, like an array.

I was not able to get switchMap() (Rx v5), or even it’s v4 equivalent flatMapLatest() though, or any other operator than map() – before I noticed I was not even calling that as an operator.

The documentation suggested the following line.

But it only threw an error. Which was very weird, because I could find the typings registry entry with this very name.

There were other suggestions for other platforms, which didn’t work for me anyway!

I also struggled to find examples of using RxJS operators with even something like Angular 2. Hence I’m writing this blog post.

How To Get TypeScript Intellisense To Work With RxJS

The main key to working with this was using the “KitchenSink” Definition file. This was also confirmed by looking at:

Property ‘distinct’ does not exist on type Observable<CustomType>

I can use this no problem because I’m in Node and not much worried about the size of the code, etc.

However, this post was not enough to get it to work. I still had a lot to fiddle with. As I mention later, I tried many things, and everything I found working stopped working afterwards.

Until I could nail it down to the following steps:

Install From NPM

You can get that by

Make sure you got at least version beta.6, not beta.2.

Add Definition File

You can do this from your tsconfig.json, like:

Or in each TypeScript file if you choose to, at the top of the file:


For the most part, the previous steps are going to be enough. However, I have found a few more gotchas in different editors, most of them are around WebStorm, which is crazy, as outside Rx, it seems to be an awesome TypeScript IDE.

I like WebStorm because it has the best autocomplete in strings (like paths and imports), and in tsconfig.json (which is outdated in VS Code).

Also, the gotchas sometimes happen in VS Code anyway. I have been going crazy between the two, as soon as I get something to work, undo it and repeat the exact steps, it doesn’t work.

Operator And Type inference

Sometimes type inference doesn’t work. I have found VS Code to be better at this than WebStorm.

In this example, autocomplete for sample1$. will give autocomplete for any, which is OK as it’ll accidentally give autocomplete for RXJS operators.

But if you want proper autocomplete:

Note the : Observable<string> bit.

Observable Helper Methods

These are methods like like of, range, etc. I have found their autcomplete to the worst, it’s very flaky at best.

A few things seemed to help, like importing from "rxjs/onservable".

(Vs from "import {Observable} rxjs")

I have also found that doing import {Observable} works better than import * as Rx.

When everything fails, going to TypeScript compiler in WebStorm and building current file, or even restarting WebStorm (Yes!!) helps fix autcomplete issues, especially if you changed your references and imports a few times. It just gets confused and doesn’t work well until an IDE restart.


Just in case it’s not obvious for those not familiar with TypeScript. I have been doing JavaScript for so long. I’m not the person who can’t code without a fully-functional autocomplete.

But since autocomplete is an essential advantage of going the TypeScript way, and I have been loving working with RxJS from the demos I saw, I wanted to take it as a challenge more than anything else to see what it would take to get this working.

A Quick 10-Min Video To Start Writing Angular 2 With No TypeScript Setup

Hello everyone,

In this video, I share a very simple tip that I earlier shared with a few Newsletter subscribers and ng-sydney members, about the easiest way you can get to play with Angular2, without worrying about shims, SystemJS, TypeScript, or RxJS.

I also give you another hint for when you want to create a “proper” project, not just a playground.

Too Long; Didn’t Read (Watch)

  • To start a new Angular2 playground, go to, scroll down to the hellow world example, and click the “TRY IN PLUNKER” button
  • If you need a proper project, just google “Minko Angular2 Seed”, click on the Angular 2 Seed Github repository, and clone that (maybe with flag --depth 1 for clean history)

Let me know if you have any questions.

You Don’t Just Claim Authority Over “Standard” JavaScript

I stumpled upon a contraversial website called the other day.

Originally I didn’t bother the name until a friend on social media commented on it, and then I looked more into the naming.

The website offers some guidelines for writing JS. It tackles a lot of areas with common disagreements like banning semicolons and defining tabs as 2 whitespaces.

However, as the domain shows, this is called!!

This quickly reminded me of another story

Standard Markdown

In 2014, Jeff Atwood, a celebrity also known as CodingHorror, decided after many frustrations with fragmentation of Markdown Flavors, to create a Standard Markdown flavor.

This is how it started: Standard Flavored Markdown

And This is How it ended: Standard Markdown is now Common Markdown

You see, Jeff, being a celeberity, got his project very popular by just creating it. This also caused the flame wars to go strong. And the expected outcome to happen.

You’d think this should be a good lesson for future Open Source Standard projects, but it wouldn’t be software if we don’t just re-implement the same mistake every few years, would it?

Standard JavaScript

Then there is thingy. The creator writes the following in the FAQ (emphasis mine):

Q: But this isn’t a real web standard!

A: Of course it’s not! The style laid out here is not affiliated with any official web standards groups, which is why this repo is called feross/standard and not ECMA/standard.

But the domain is NOT , it’s just

Even worse, there’s a static analysis NPM package, that is supposed to help enforce the guidelines in Pull Requests etc., for repositories that implement the standard.

Guess what’s the name of the npm package?

Correct, it’s standard (Yes, No JS even, it is THE Standard!)

“I Disagree” As a repository label

Of course several people tried to object to the naming, via the most appropriate Github way to object to things, project Issues.

They called claiming the word Standard as “Obnoxious”, “Misleading”, and plain “Arrogant”.

All issues discussing the name went into a Github Issues label called “I Disagree“.


I tried to do it differently, and suggest just changing the non-constrained domain naming.

My issue was quickly closed with the same label (in about 11 minutes), thinking that it disagrees with the project naming.

Once I explained it was about the domain (once more), it was opened, and marked as a Question.

Here it’s: Abandon / Redirect domain to something else

Thinking About It

The whole thing is a bit weird though. Isn’t?

One doesn’t just declare standard over NPM or JS without being in the official authorities for these. io.js didn’t call itself StandardNodeJS, even though it had old NodeJS contributors in its committee.

Am I crazy to think that we should have gone past this kind of issues?

Writing An Angular2 Component in Today`s JavaScript (ES5) – Beta Edition

With a lot of changes happening since Alpha 48 all the way to Alpha 55 (later labeled as Beta 0 as well), the way you write components in general, even in plain JavaScript has changed from what might have seen in other posts.

Then the beta was out. Learn about it here:

For a hello-world app at least, things didn’t change in beta than in Alpha 55, here’s how to do it.

Loading Angular 2

Here are all the files we’ll need:

If you played with Angular 2 alphas and JavaScript before, you’d have seen some Angular.sfx.*.js files. sfx used to refer to “self extractable”, meaning you don’t need a package manager to use it. It got renamed to umd, which I assume is like “Universal Module Dependency”.

Also, some parts were extracted from the core, like zone.js, the, the magic that saves you from things like scope digest cycle in Angular 1, into an angular2-polyfills.js file.

Finally, Reactive Extensions, a library that Angular 2 uses to replace promises and more, was extracted from Angular main bundle as well, while still copied to the CDN, as Rx.umd.js.

So, the steps to get what files to load:

I’m assuming if you are using ES5, you don’t want to even bother with NPM. So, I set the steps based on that.

  1. Go to AngularJS CDN
  2. Search for 2.0.0 and find the highest version folder. For example 2.0.0-beta.0.
  3. Look for the following files in the folder, and use them in order:
    1. Rx.umd.js
    2. angular2-polyfills.js

This will give you the ng global variable, which is what we will you to define and bootstrap our components.

You will later want to include things like the “http” file and “router” file to use their corresponding functionalities.

Defining A Component

There are two ways we can use to define components in JavaScript:

Static Property

This should be familiar to you if you ever tried to write object oriented code in ES5:

  • You define poor-man’s class, ES5 style, as a function (the convention is to use PascalCasing for these).
  • You set a field called annotations on the function itself to be like a static class property. It’s the equivalent of attributes/annotations used in TypeScript.
  • You add the ng.core.Component annotation.
    That’s where you include the selector, template and other component properties just like in TypeScript. Except in ES5 you don’t have multi-line strings.

    • Note the PascalCasing. It’s another class.
    • The selector is almost always an element CSS selector. A custom element typically is lowercased with at least one hyphen - in it, like hello-world, which maps to <hello-world> in our HTML.
    • The template is just like the template in an Angular 1 directive (except with Angular 2 template syntax). You can also use templateUrl.
  • A couple of gotchas:
    • Note the part ng.core.Component. This is due to Angular splitting it’s code into different parts like “core”, “common”, “compiler”, “platform”, etc.
    • If you miss the new in there, it won’t work, and you will be scratching your head for quite a bit.

Fluent API

This tries to get even closer to TypeScript. It’ll either make you feel you have TypeScript already, or make you die to move to it!

  • Notice the same ng.core.Component explained above
    • Gotcha: This time do NOT use new before it. Actually it will NOT work if you add new. Beware of this gotcha.
  • After that, you use Angular’s own Class class (pun intended).
    • The “constructor” field maps to the function in the first example.
    • Gotcha: You MUST add a constructor even if it’s just an empty function, or else it will not work.

Data Binding

This is worth its own article. For simplicity, let’s look at a simple ng-model example:

  • We used the two-way data binding syntax [(property)]=value.
    • the syntax [attribute]=”value” is used to bind from JS objects to DOM attributes and other directive attributes.
    • The syntax (eventName)=”handler” is used to bind from the DOM (like DOM events), to a JS function that handles the change/event.
    • As [] means JS => DOM, () means DOM => JS. [()] is used for 2-way data binding.
  • We said ngModel, not ng-model. This is a relatively recent and controversial Angular 2 change, that all component DOM attributes (Angular components or custom components), will use the camelCasing, instead of hyphen-separated (also known as kebab-casing).
  • In earlier Alphas, you needed to set a directives property to your component to use ngModel, ngFor, ngIf, etc. These are no longer required.
    (If you don’t know what that is, it’s dead anyway. Don’t bother for now)

Bootstrapping The Component

OK, let’s say we wrote the above components, and we want to use them. How would we do that?

The convention in Angular 2 is to have an application component. Something like:

  • Note that for us to include other custom components in our template, we had to add them to another property, called “directives”.
    We didn’t have to do this for the built-in things like ngModel.

Then in HTMl, we use the app component:

  • It’s another Angular convention to put the default UI (like a loading indicator) inside the app component.
    Angular 2 will replace that with your template when it loads it.

Now, to make the magic happen, you need:

  • If you don’t know DOMContentLoaded event, you probably were doing a lot of jQuery. This is the standard equivalent of the jQuery “ready” custom event.
  • If you did this in previous alphas, you might notice that part ng.platform.browser.bootstrap.
    • I mentioned earlier that Angular2 functionality has been split into different parts. plaftorm is one of them (this is like a namespace in C#/Java – the convention for namespace casing is camelCasing).
    • Since you can use AngularJS with even something that is not HTML at all (like NativeScript for native mobile UI), that’s why (I guess) we need to select the “browser” platform to bootstrap it.

And that’s it. You get a nice application running!

Full Example

Here’s a complete application for easier read:

Using TypeScript Async/Await With Selenium NodeJS Bindings

In previous post I described how I used TypeScript with Babel to get my JavaScript Selenium tests to be executed by Node.

I wanted to dedicate this separate post to an example of the Selenium code that I wrote, because there are many tricks and gotchas that need your full attention.

That’s mainly around the use of async/await of course. Instead of write a paragraph about each piece of the code, I have embedded my points in the code itself.

The sample simply goes to the Angular2 Github repository, and reports the title and date of the first page of open issues in the repository.


In case you wonder, here are the packages used above, in a single NPM install command

This doesn’t involve the build configuration to get this compiled and running.

Check out my other post to learn how to setup the build for this.

Finally, I hope those two articles combined help you write your own asynchronous code with ease, with Selenium or any other purpose.