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.

<code>typings install rxjs-symbol-typings

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

<code>npm install @reactivex/rxjs@latest --save

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

Add Definition File

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

    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": true
    "compileOnSave": true,
    "files": [
        // Typings autocomplete file

        // RxJS autocomplete

        // Your other files come here
    "exclude": [

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

<code>///<reference path="./node_modules/rxjs/Rx.KitchenSink.d.ts"/>


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.

<code>var sample1$ = Observable.create(observer => {"Non-proper autocomplete");

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:

<code>var sample2$ : Observable<string> = Observable.create(observer => {"It works");

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".

<code>import {Observable} from "rxjs/Observable";

(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.

A Web Developer’s Macbook Pro 15 Wishlist

I’m due for a laptop update at the end of the year. I love to follow news about the laptop brands I care about though. Apple is on top of the list.

I only have one Macbook, as I use Windows very often. I got my Apple Macbook when I wanted a *nix friendly native OS for development, and I felt that Linux just doesn’t cut it.

Of course I realize that *nix tools are coming to Windows relatively soon, I’m not sure whether my next laptop will be a Macbook.

But there are things I definitely like about Mac OSX, and the laptop itself. Battery life is one, and the power available in the form factor and current weight is very cool as well.

So, if I’m going to buy a Macbook for my next laptop, this is what I wish Apple would include in a 2016-2017 Macbook Pro 15:

  • A touchscreen!
    C’mon Apple. You are seriously behind on this one

  • Non Retina screen
    The 1440×900 screen is lovely already.
    At least offer the option for those willing to take it for the battery benefit

  • Long lasting battery
    12+ hours, at least

  • An extra right-side “Control” keyboard key
    Eat a bit from the spacebar key. It’s OK.
    As a right-handed developer, with a lot of tools defaulting to using “Control” not “Cmd”, that key will be a saver

  • Same CPU class as before
    Don’t go to these “U” CPUs, keep the quad core CPU, just update to latest generation

And what could be a really nice bonus, although I’m not holding my breath:

  • 32 GB RAM :) :)
    Because, why not?!

  • Same size and weight, with better ventilation
    I don’t want a thinner or lighter Macbook. It’s perfect as it is now.
    I want one that doesn’t feel hot too often that it has a series of fan-controlling apps though!

It’s a VERY long shot to expect that Apple will read this, let alone listen, but who knows…

How To Include AbcPDF XULRunner Folder As Linked Item In Visual Studio?

I was working on some PDF generation for a customer that used AbcPDF in their ASP.NET MVC website.

The work was to move from basic MVC views written especially for PDF rendering, to reusing the same MVC views we send to the HTML browsers.

With more sophisticated markup, came more CSS styling. The default IE engine seemed to lack a few CSS features we used a lot (example, the :not() CSS selector). So, we decided to use the Gecko engine.

The rendering was much better, with a single exception, that the option to choose media type (screen, print) could not be switched. It had to always be print. I guess a few other browser settings were not applicable as well.


All I needed to do, to add Gecko, was to install the ABCpdf.ABCGecko NuGet package. Something like:

<code class="PowerShell">Install-Package ABCpdf.ABCGecko -Version

It took quite a while, and at the end, it showed me a message, saying that I need to manually (hate that word) copy a folder called XULRunner21_0 to the MVC project’s bin folder.

The Firefox / Gecko XULRunner Folder

The folder is needed for AbcPDF to connect to Firefox 21 (what’s used in v9, I guess it’s 38 in v10).

The folder, which has so many files and subfolders, was present in the root of my ASP.NET MVC project.

I didn’t want to have to commit this ~40 MB folder to our source control. The customer used NuGet package restore and didn’t want to keep binary files in source.

I know different people and different projects handle dependencies differently, and it can get interesting, but in my case, it was not wanted.

So, I modified the web project .csproj file, and added the following after a PostBuild <Task> in the file:

<code class="XML"><ItemGroup>

This made the folder show up in the project web project root in Visual Studio, and get copied to the bin folder, but the actual files were pulled from the package folder, not left in the website root itself.

The approach in general is very useful for adding an entire folder as a linked item in Visual Studio. I hope that little trick has helped!

Death By (Any Of) A Few Thousand NPM Dependencies

You see a lot of weird things on the Internet, this one wasn’t the weirdest, but it’s worth talking about.

A very tiny Npm package, called left-pad (and yes, as you can imagine, just pads strings), caused both Ember, React Native, and Babel Npm installations to fail, also breaking any CI that depends on fresh Npm installs.

It All Started With A Kik

The packages were broken as the author of the left-pad package unpublished (removed) it from the Npm registry. The author explains why here. Allow me to quote a few parts:

A few weeks ago a patent lawyer sent me an e-mail asking me to unpublish “kik” module from NPM

Yes, another package the author published called Kik. Nothing about left-pad yet.

When I started coding Kik, didn’t know there is a company with same name.

This part is important. If you use a trademark name as a name of your public IP, whether you know it or not, you still use a trademark name.

After I refused them, they reached NPM’s support emphasizing their lawyer power in every single e-mail CC’ing me.

@izs accepted to change the ownership of this module, without my permission.

So, being a company, with some trademark name and legal team, they contacted the authority of the Npm registry to get the change enforced.

After that, the author decided to un-publish all his packages from the NPM registry, and let-pad happened to be one of them.

Oh No, NPM Is Evil (Or, Is It Really?)

So, based on the author’s side of the story, the company went to Npm with a trademark claim. The author does not deny the claim or mention an effort to avoid it when he chose the package name.

Then, Npm acts based on on the claim, and accepts it.

Which reminds us of a very interesting fact. While Npm tooling itself allows working distributedly, either via multiple registries or even git, the official Npm registry has an official authority!

Too bad for freedom, you might think. But does it ring a bell?

For me, it does. Github and Git.

Git is distributed by default. But see what happens when Github goes offline…

Welcome to the real world of 2016!
(Not that I’m suggesting this might not change)

What Was An Official Entity Supposed To Do In This Situation?

I don’t know for sure, but I wouldn’t expect Github, Google, Amazon, Microsoft, or any other hosting company to act differently.

Whether specified in T&Cs explicitly or not, no reputable host will allow customers (free or commercial) to use their services for anything illegal.

If they are convinced the trademark claim is valid. What are they supposed to do really?

Of course there is a bit of a grey area in here. Some might argue that other companies would only act if they get a letter from court or something like that.

But you do not suppose the company would protect the offender of a trademark offense, if they are convinced it is, right? Whether before or after court.

Even if you do not agree, it’s not that Npm is trying to do anything intentionally evil here, just acting the way they think safer, legally.

But There Is A New Risk Exposed In This Story

The fact that Npm is a company should not be that new to us. We already got introduced to similar facts with Github and others. That’s not the most interesting piece here.

When Node and Npm came out, many people raised their concerns about how a really small task in Node would often require you to pull down a huge number of Npm dependencies.

Some argued that small tasks require having very large repositories because of these dependencies. Some made (less compelling?) arguments that you don’t understand all the dependencies you have in your code.

That didn’t stop the ecosystem from being VERY successfully though.

But today, we have a new concern, that is also directly related to the number of dependencies we often have in Node projects.

Packages Might Just Disappear, And That’s Worse Than You Might Think!

If your project, or your Npm package, depend on many other packages, this means your CI process, if it starts with a clean environment and an npm install command, will fail badly when any of these packages just suddenly disappear.

We never thought of what could happen if packages like “connect”, “request”, or “lodash” just disappear some day. We never thought that this scenario could happen ever.

Today we learn that a massive impact can be caused by even a very simple ELEVEN LINES Npm package.

Of course, with the publicity the author is getting, and several developers agreeing with his view, we might also see more packages “just disappear”.

We’ll only hope they do it in less destructive manner (and I will not say “more responsible” manner), via a deprecation story or whatever. It will still be painful to witness.

The Future Is Unclear

Of course the obvious question is: Where will this take us going forward?

I wish I could predict the future. I’m horrible at even forecasting it.

But, we didn’t stop using Github just because it went down a few times, or had its internal culture questioned in a couple of occasions. I don’t know if we are going to use Npm less or not though.

One interesting observation about the specific let-pad package case, is that since the package is licensed under MIT, this might allow anyone else to republish it without license / legal worry. Or wouldn’t that be enough? Well, commenting on this can be a whole new post.

There will likely be more public Npm registries created. Maybe they’ll die slowly, or one of them will be the next big thing. Maybe the next big thing will be a completely different package manager, like JSPM, or a new one yet-to-be-created.

Let’s wait and see, for now, we just know it’s not the same in the Node world anymore. We learned how the dependencies graph is just a house of cards, where one card can break the whole thing. It won’t be 100% forgotten.

Update: The Story Details

For all the details you need, here’s all sides of the story:

Since writing this post, and especially after reading Kik’s side of the story (basically a copy of the entire email communication), I had a few extra thoughts:

  • Azer (the author) was right when he mentioned Kik’s poor communication. Not that his communication was much better, but theirs was really bad.
    They get a lot of heat for describing this as “polite request” before admitting their poor communication in the same post.

  • Kik is actually a registered trademark. I was thinking it might be. That is something I guess.

  • NPM mentioned that their decision was based on the confusion more than the trademark. On one side, this weakens their position in my opinion, a lot.
    On another, after learning that it is a registered trademark and seeing the emails, I’m not buying that this wasn’t a big factor anyway.

  • There is still the whole other problem of ownership of open source with permissive licenses like MIT, whether a single developer should really have such power in the NPM ecosystem.
    I learned also that NuGet for example (.NET package manager) does not allow unpublishing packages, only unlisting them. Makes total sense to me.

    There’s a good argument for a start that I also found.

Should Angular 2 Be Renamed Like ASP​.NET 5 » ASP​.NET Core?

TL;DR: No. It’s not exactly the same situation.

A friend asked in the Egyptian Geeks Facebook group in Arabic:

Is Angular 2 a suitable name, or does it need a new name? Or am I just not getting the big picture?

Because when I learned about it, I found a lot of different, removed, and new pieces.

As ASP.NET 5 became ASP.NET Core 1, is it a good idea to pick a new name to show the big difference from Angular 1?
Or is this just my problem and the difference isn’t that big?

I thought that it is a logical question. Here is my take on it, as a non Angular team official or affiliate…

My Answer

First, the question has a good point.

The “Core” naming came from Microsoft’s plans to make everything in the new ecosystem “Dot Net Core”-first.

Microsoft always tried to make the point for people that ASP.NET 5 is a “Version 1” product, that is neither neither as version-complete or as mature as ASP.NET 5.
This is way before the rename to ASP.NET Core 1.

Maturity And Meaning Of Upgrade

The Angular team has a different vision. They have confidence that they transferred all their lessons developing Angular 1 into the development of Angular 2. Which is why they really feel it is an upgrade.

They want people to move to Angular 2 automatically, not to feel that they are back into the “framework selection” process again.

I bet the Angular 2’s ideal world is one where they can stop Angular 1 support as soon as they release Angular 2. Except they definitely won’t, so that they don’t let they users down.

Naming Is Hard

As the ASP.NET team themselves always said, naming is a Marketing issue rather than a technical issue. It’s not simple. Everyone have different considerations when naming things.

Another example is Aurelia. Aurelia couldn’t be just “Durandal Next”, because the name “Durandal” has been related to failure in people’s minds (after a failed kickstarter).

It is the opposite situation in the Angular case. It’s hard for it to be called anything else (even something that has the word “Angular” in it), because it needs to be interpreted as an upgrade.

This is, again, not what Microsoft wanted to communicate. They wanted the new name to convey their message that the new ASP.NET framework is NOT an upgrade.

It does not the experience of 15 years of work on the existing ASP.NET framework and add to it in a newer version. It’s a different, modern, lean framework, that is still in year 1.

You can see the contrast clearly.

The Standard Answer

A few others have also pointed out that as per Semantic Versioning, a major version number is acceptable for breaking changes.

I see that there is a difference between “Breaking Changes”, and a “new API surface”.

But there is no standard that tells you what to do in that case, so, the use of major version number (which is technically correct) is still sort-of reasonable.

There are many many patterns in versioning software, as Wikipedia explains.

What do you think?

Let me know in a comment below, or in an email, or tweet.

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:

<code>var HelloWorldComponent = function() {};

HelloWorldComponent.annotations = [
  new ng.core.Component({
    selector: 'hello-world',
    template: '<h1>Hello Angular2!</h1>'
  • 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!

<code>var HelloFlentApi = ng.core.Component({
  selector: 'hello-fluent',
  template: '<h1>Hello Fluent API!</h1>'
  constructor: function() {
  • 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:

<code>var HelloFlentApi = ng.core.Component({
  selector: 'hello-fluent',
  template: '<h1>Hello {{name}}!</h1>' + '<input [(ngModel)]="name">',
  constructor: function() { = "Fluent API";
  • 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:

<code>var AppComponent = ng.core.Component({
  selector: 'company-app',
  template: '<hello-world></hello-world>' + 
  directives: [HelloWorldComponent, HelloFlentApi]
  constructor: function() {}
  • 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:

  Loading ...
  • 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:

<code>document.addEventListener("DOMContentLoaded", function() {
  • 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:

[Solved] Ionic Cordova Does Nothing (Shows No Error) After Build Or Run On Node 5.0

I had an interesting issue with Ionic recently. When I run
ionic platform add ios (or any other platform), I see a good message suggesting it added some hooks successfully…

But when I run ionic build ios or ionic run ios (or emulate), I get no output at all. Nothing happens. No emulator opens in the case of run/emulate.

It also wasn’t specific to ios. Same with android and browser.

I found that Cordova had an issue with NodeJS 5.0 and NPM 3.x, which I have installed recently. Googling online suggested people kept going by reverting to NodeJS 4.x.

What Didn’t Work

The Cordova problem was supposedly solved in Cordova 5.4.0. I installed that (just npm install Cordova as it’s the latest at the moment), but this caused me to get random NodeJS execution errors instead of getting no output.

Well, at least that was feedback. Hooray for progress!


I didn’t want to give up and go back to NodeJS 4.x, so I tried the following, and it worked :)

<code>npm install -g npm
npm u -g cordova
npm u -g phonegap
npm u -g ionic
npm cache clean
npm install ionic
npm install cordova

At this point I tried ionic platform add ios,
ionic build ios, and ionic run ios

And they all just worked as expected :)

Notes For The Careful Observer

  • I already had latest NodeJS before running the commands, as confirmed by brew upgrade NodeJS (Yes, my test was on Mac), which has NPM 3.3.9.
    But I updated NPM (which got me NPM 3.3.12) just as a random step while troubleshooting the problem. It could well be not necessary to get this working.

  • In the commands above I remove Phonegap but don’t install it again. It’s not because I suspect it’s involved. I was just being extremely cautious.
    I didn’t show installing it again because it’s not required for getting Ionic/Cordova to work again, but it’s sure is safe to install again.

xperience went.


There is a problem with XCode tools for Mac OS El Capitan that causes an error to show up when you run the emulator (like ios emulate ios).

The error is safe to ignore as long as the last line of the output was
** RUN SUCCEEDED **, and the emulator actually opens and shows your app.

Apart from that, iOS emulator seems to be miles ahead of Android in terms of speed etc. Says me, the Android-only owner!

Now To You…

Let me know if that helped you, and your own e

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.

<code>// Following `reference` comments allow Node & WebDriver autocomplete.
// This is needed as both are not written in TypeScript.
// You can download them via TypeScript Definitions package manager:
//      npm install tsd -g
//      tsd install node
//      tsd install selenium-webdriver

/// <reference path="typings/node/node.d.ts" />
/// <reference path="typings/selenium-webdriver/selenium-webdriver.d.ts" />

// If you are not using babel-runtime (see prev post), 
//      you can try this instead. You'll still need babel processing.
// This worked in atom-typescript, didn't work in gulp run.
// Not good to have to write it in every file anyway

// The selenium-webdriver offers multiple exports
// Each of them works like namespace
// To use, you need:
//      npm install selenium-webdriver
import * as webdriver from "selenium-webdriver";
import * as chrome from "selenium-webdriver/chrome";

// This is optional good way to manage chromedriver binaries
//      npm install selenium-binaries
// You see I can mix `import` and `require` in same file!
var chromeDriverPath =
process.env.CHROME_DRIVER_PATH = chromeDriverPath;

// Shorten the names we'll use a lot
var By = webdriver.By,
    until = webdriver.until;

// Configure WebDriver. Nothing async yet.
// Could also move into next function no problem.
var driver = new webdriver.Builder()

// You can only use `await` inside an `async` function.
// Hence the IIFE (immediately-invoked function expression) wrapping
(async function() {

    // Some code to ensure browser is closed if I get an error
    // That's trial and error with Selenium, and googling...
    await webdriver.promise.controlFlow().on('uncaughtException',
        async function(e) {
            await driver.quit();
    await process.on('SIGINT', async function() {
        try {
        } finally {
            await driver.quit();

    // I'll store the results here then console log them.
    // I could log them directly, at 1st I didn't know how
    //      and now I'm keeping it to show more cool tips 
    var results = [];

    try {

        // Most WebDriver functions return special promises 
        //      that allow you to call the next function fluently:
        //      `driver.get(...).findElements(...)`
        // But that's not cool for debugging which part failed
        //      & doesn't work with loops, etc.
        // So, I `await` most of the `promise`s.
        await driver.get("");

        var issues = await driver

        // This is worth its own post:
        // When I use `async` function in `map` (to use `await` in it),
        //      I get an array of promises, not results
        // So, I use Promise.all to
        //      get the results in one promise I can `await`
        results = await Promise.all( function(issue) {

            // Could have used `await` here or did it fluently
            // Just showing different styles.
            var titleContainer = issue
            var title = await titleContainer.getText();

            var dateContainer = issue.
            var date = await dateContainer.getAttribute("title");

            return { title: title, date: date };

        // console doesn't get flushed inside `async` functions
        // Surprisingly, I can `await` it to work!
        await console.log(results);

    } finally {
        await driver.quit();

} ()); // As mentioned above, the function executes itself


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

<code>npm install selenium-webdriver babel selenium-binaries

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.