How To Get jQuery To Work With Angular 2 CLI – Webpack Edition


I wrote a post yesterday that talked about:
Using Webpack with Angular CLI directly from official Github source
The post seemed to get a bit of traction on twitter, and among other feedback, I got an interesting question in a direct message:

Hi Meligy, Have you tried importing jQuery in Angular-CLI webpack branch project anytime??

Well, turns out I didn’t. I expected it to be just a require(...) / import ... line away. With Webpack, you often don’t need much more than that.

But then when I tried, I found a problem after another, which turned to be very specific to jQuery. It’s an edge case, but for the library the community size of jQuery, it’s worth showing:

A Working Configuration

First, install jQuery:

Then install jQuery typings:

Adding a test

Then you can modify src/main.ts to include and test jQuery:

  • Add the import:

  • Change the bootstrap(AppComponent); line to:

Running it

You can go ahead and run ng serve or ng build -prod. I saw what looked like a TypeScript error in the output, so, go run just that:

You’ll get an error:

Explaining the problem

This error is because of a conflict between Angular Protractor and jQuery. Angular Protractor defines a global “$” that you use to write your Selenium element selectors nicer, etc. Normally you don’t write real jQuery code in a Selenium test, but Protractor is included in the TypeScript definitions that are included in the entire application.

Working around it

A temporary workaround is to manage the typings files for the website (src folder) and End To End tests (e2e folder) separately.

Each of the the folders have a typings.d.ts file that has (possibly among other things), a typings reference to the root level typings folder:

The problem is that the typings/index.d.ts file looks like:

Now, we can’t have both angular-protractor and jQuery in the same file, but we cannot modify typings/index.d.ts directly because every time we run typings install, the file will be overridden (and many even add the typings folder to .gitignore).

What we can do though, is replace the reference to it from src/typings.d.ts and e2e/typings.d.ts. When we do, we need to account for path change, we’ll need to prefix the paths with ../typings/ to point to their correct location.

In src/typings.d.ts, we replace the ../typings/index.d.ts reference line with:

In e2e/typings.d.ts, we replace the ../typings/index.d.ts reference line with:

And that should be it. No errors n TypeScript compilation, and running ng serve, then opening http://localhost:4200 shows us that the app still works, with the bootstrap() call now executed from jQuery’s ready call – which we added only to make sure it works!

Run ng build -prod and check the output in dist. You’ll find that it also works well.

Remember, this is only a workaround!

A drawback of what we did is that every time we add typings for a new library using the typings command, we’ll have to add a reference to it manually in src/typings.d.ts and/or e2e/typings.d.ts depending on fit. It’s easy to forget the manual step and get confused.

Luckily though, this is an edge case. Most of the libraries will not have such conflicts (see, that’s why everybody says modules are cool and globals are bad!). For most libraries, all you’ll need to do is to require(..) / import ... a module from the library, and everything will happen magically. Thanks to Webpack, you’ll not even need to setup vendor or systemjs config etc. Check my previous post for more information.

Other ideas

A few other starters seem to have the same problem. One other way to tackle it is to exclude the path typings/globals/angular-protractor from the Webpack config, but currently, I can’t see this config exposed from the Angular CLI. I’m sure it’ll be there once it’s final etc., but it’s not there now.

Another idea is to have a noConflict typings version of jQuery. There’s a pull request to DefinitelyTyped registry to include that, but it’s abandoned and closed at the moment. You can try calling the exact file via typings as a github~ file not dt~. But obviously you miss potential updates.

The best thing that can happen is that the Angular CLI would bring the separation of typings for src code and e2e tests built-in, which may or may not land in the CLI. Let’s see!

Should you use jQuery with Angular 2 at all?

I think the answer is: avoid it if you can.

I’m currently working with a team that has it included, and it was mostly due to needing some UI widgets that are only available for jQuery. I’m hoping that this is going to change with more UI widgets coming standalone, and easy to wrap in Angular 2 components / directives. Many widgets are becoming available with the Angular 2 wrappers already, like the lovely ng2-bootstrap collection.

Videos from Sydney JavaScript UG, 19 June 2013

Let me put the interesting stuff first, some good videos from SydJS gathering this month:

Pro-tip: Make sure to switch video quality to 720p for best experience. The video quality button is one of the left buttons next to full-screen button.

The videos

WebGL, the Goo Engine, and your Blackberry

I18n – why, how; and where the name came

JavaScript based ERP

Jerkins CI & JavaScript

The future is a promise


My readers know I have been experimenting with video publishing for a while, focusing on simplicity in getting releases out. I started with a simple introduction to the new Angular.JS library, a simple productivity trick for all users, and then a simple and old cross browser CSS trick. In the 3 videos, you saw me explaining stuff. It’s time for something different.

The idea is to record the usergroup sessions I go to. I started with ALT.NET Sydney last month, organized with speakers to use their own recording, then got a bit unfortunate due to technical issue on the machines used.

This month I didn’t have a connection with the speakers to coordinate the recording, so I just took my phone to Sydney JavaScript usergroup (SydJS), sat in the first row, and started recording a separate video for each session.

Due to the nature of the way I used, and being a first timer, you’ll find some issues with the videos like the scene moving up and down a bit, and zooming-in and out or fading a bit. However, the videos are still an OK resource for anyone who missed the event (or doesn’t live in Sydney at all). So, hopefully you like them, and I get to improve the technique next time.

What is my opinion about Knockout vs. Angular ?

My Angular.JS video is getting way more traction than I thought, with over 2K views and a lot of comments on Youtube and Facebook. One of the comments on Facebook came today was:

What is your opinion about Knockout VS Angular what is the best !! and thanks for the Good tutorial Mr Mohamed

An interesting question. There is an easy answer that is both technically and politically correct, that goes like: There is no “best”, each has pros and cons. For which one to use, “it depends”.

But I bet this is not good enough for anyone interested in the question, so, I’ll expand a bit here…

A Personal Opinion

“A personal opinion you ask, a personal opinion you get, so, treat it like one, no more”

Mohamed Meligy

Angular.JS does more than binding DOM to JS objects, like routing and enforcing code organization, and connecting to REST server APIs, etc., so, the more accurate comparison is against Durandal.JS, which uses Knockout for DOM binding, Sammy.JS for routing, Breeze.JS for REST data interaction (can be used with Angular), etc.

Knockout is old, and very mature. It was designed to be very easy to plug it into any jQuery plugin or jQuery UI widget. It was also designed to work with all browsers down to IE6. With Durandal.JS you also get the other parts that Knockout itself does not cover. If you are writing an app that depends on very complex “existing” jQuery components that you didn’t write yourself, it may be a better option.

Angular.JS is relatively new. It doesn’t feel like new when you see so many tutorials around and very enthusiast community around it, but it does feel so when you look at things like how the official UI components are in complete refactor/reorganization mode for quite a while. Mind you, they still work nicely though.

Angular.JS does not care as much about legacy browsers. The lowest they support is IE8 and only with DOM/EcmaScript5/JSON shims, and when things don’t work in IE, the whole thing fails with no particular error line to start with.

Having said that, “for me” Angular is the future. I’m not saying that KnockoutJS will die or whatever, it’ll be stupid of me to think so. Angular.JS is very functional as it is now and I used it to save us time in a current project (yes, even with IE support), and along with time and very passionate community (just like Knockout started), it’s expected to get better.

Does this answer the question?

Maybe, and maybe not. I have done quite a bit with KnockoutJS, but not much Durandal.JS, hence this should be taken with a grain of salt. There are several comparisons on the web that go into more detail. I just wanted to write my personal take here so that I can refer to it later when people ask.

Of course, like many opinions, my opinion itself may change as I learn more or as both libraries evolve more.

So, yeah, I highly encourage you. Go ahead and make your own conclusion. Needless to mention, those two libraries are not the only two in their category too ;)

Easy Ways To Discover Feed URL of A Website / Page

All blogs and news websites provide some sort of aggregation feed, usually RSS or ATOM. This allows users to add the feed URL to their favourite aggregator and stay updated with future stuff when they come. This post shows how to get a URL to subscribe to, and how to get multiple URLs if the site provides multiple formats.

A .NET library

One easy way to do this in .NET is using the Argotic Syndication Framework library, the code will look like:

Here is what you get when you run the code against


A few notes on this approach:

  • You must have realised the Where check in the code, the library seems to capture any related link in the HTMl, not just syndication links. that’s why we needed to filter them explicitly
  • Quite often when you have a main site that has different branches, you get more than one feed link, for CNN for example you get different feeds for certain site languages, for you got one for the site itself and another for members of the service. Arguably, this is not always what you want when you add the site to a reader kind of application
  • As expected, this code is quite slow in debug mode, takes about 1.5 seconds to run alone! In release mode (build configuration set to “Release” and so web,config)


Google API

In its simplest form, the syndication discovery is a matter of finding a link tag with a proper rel attribute (typically set to alternative), and a type attribute holding the attribute, however, in real life, at least historically, there used to be many variations of the way the discovery was implemented (read the next section for more).

One of those who managed to get right URLs for different edge cases was Google Reader. Apart from Google Reader itself, whose closing was part of the reason I wrote this post, Google allows you to use their systems to get the right syndication feed URL of a given page via simply calling a public JSONP API.

This is the structure of the data parameter returned by the previous call:


To learn more about this specific API, check:

To learn what’s special about JSONP requests and why jQuery needs to treat it differently, read the $.getJSON() documentation:


Background Of The Problem

Even though social media has made people depend on links shared on social media sites (by their peers, or the creators of the feed), the trend of adding a syndication feed to website is a trend that continued to increase in many product and subscription websites, especially that it’s easy to automate social media posts from the feeds after that.


As Google Reader will be retired in July, I thought for a minute about what it’d take to put some web based reader together. This was before I learned about the existing awesome alternatives like Feedly and so many others.

Then I remembered there was an application I was working on in 2007, one feature we needed and a colleague worked on was getting RSS posts from personal blogs of the site members. I remember seeing him doing all sorts of crazy Regular Expression matches of so many formats to get the URL. Turns out at least at this time different blog providers used different ways to advertise the feed URL in blog homepage markup, there were so many cases, it took my colleague several days to cover a large set of test cases from different providers that we knew our users were using.

I wanted to see whether this problem was still a thing n 2013, and tried to see what options we had, hence came this post, you know, just for fun :).

Hope some of you were interested in this too!

On _references.js files in VS2012+, or the state of JavaScript Intellisense in Visual Studio

If you downloaded Visual Studio 11 Beta, and tried to create a new ASP.NET MVC 4 empty project, looking at the “Scripts” folder, you’ll see this new file “_references.js”:


Which looks like the following:

The VS <reference /> Syntax

As you probably know, the // <reference path=”…” /> syntax was introduced in Visual Studio long time ago to make you able to have intellisense in any JavaScript file to include everything defined in the JavaScript located at this path.

In easier words, if you write the very first line in any JavaScript file, say “my-page.js”, and make sure the path points to the proper jQuery file, when you write code in “my-page.js”, you’ll get intellisense for everything in the jQuery file. The quality of the intellisense will vary based on the referenced jQuery file, whether it’s minified file (least intellisense info, only member names, sometimes), just standard source/debug file, or even one that VsDoc comments (best intellisense, might even have notes on what types you need to pass to methods, when defined in VsDoc comments).

The Resharper Way

If you are using Resharper 6 or so, Resharper will give you intellisense from all files in the project. Generally speaking this is a good thing, but it has two drawbacks:

  • If you have so many JavaScript files in the project (for example, number of common files plus a file or two for every page in a big project), the JavaScript editor experience can be bit slow in times, as Resharper tries to evaluate all the JS files to get you intellisense
  • When you type the first letters of a member, the intellisense menu will bring so many results, because it will include all possible members from all files in the project, even the ones completely unrelated to what you are doing now. The way Resharper tries to make this less severe, is that it tells you which file it picked every intelisense item from.

The Visual Studio 2012 Way: Or The _references.js File

In VS 11, Visutal Studio will give you intellisense from all files that have references in the “_references.js” file. This way you can define the global / common files you use all the time. This might include some library files like jQuery, or some files you use everywhere in the project like some internal utilities files.

For related files, you can use the “<reference >” syntax on top of every file to connect them (from intellisense point of view).

File Location

Note that there is only one _references.js file for each project. It doesn’t work like web.config where you have have web.config files in site folders affecting only those folders.  An _references.js file in any other location than “~/Scripts/_references.js” will be just like any other JS file and won’t be used for global intellisense. Even putting the file in the root of your web project will not work as well.

Update (March 21, 2012)

After reading Scott Hanselman’s post on hidden web features in Visual Studio 11 beta (posted yesterday), turns out you can add files to the global JavaScript intellisense from the Visual Studio Tools –> Options Dialog:


In the options windows, go to Text Editor –> JavaScript –> Intellisense –> References node in the tree view at the left, then from the dialog that comes, choose “Implicit (Web)” for “Reference Group”. You can see that the _references.js file itself is just an entry in the list, and you can add other entries below.

You can pick specific files, or use the “~/path-to-file” to use a path relative to the root of your web project.


Creating a simple C# like string.Format() method for JavaScript

Recently I started working on some interesting HTML 5, CSS 3 and JavaScript bits (involving jQuery and jQuery UI). I have worked with all of them before, but not as extensively. Most of my work is some reusable stuff that I can develop generic demos out of (from scratch, unrelated to the custom stuff required here), however, the size of each made me always lazy to take the opportunity to share some nice stuff with you via GuruStop.

I decided to encourage myself to stop laziness by sharing a very small part, then hopefully follow with the real interesting stuff.  Today we look at a simple String.Format() function, similar to the one available in .NET / C#, meaning it uses {0}, {1}, etc… as placeholders.

Look at the code, click the “HTML” tab for the sample HTML used for this one(just a div with an ID), and “Result” for trying it out yourself.  You can also click the “+” button at the right and edit it if you like to!

Note that this one is intended for simple scenarios only. If you need complex / flexible templates, use some templates library like JsRender or knouckOutJS templates.

Did you like this post?

If yes, next post will be another simple one, implementing a Ruby-like format method, where you have {namedArgument} instead of just {0}, {1}. After that we’ll start getting more interesting stuff with CSS and maybe HTML 5.

Stay tuned!

jQuery E-book Free For Few Hours Only “jQuery: Novice to Ninja”

image SitePoint, a well-known publisher of nice easy-but-deep books in web design and web related stuff, has celebrated the end of the world cup (and the fact that Spain has won) by putting an ebook of one of their titles for FREE (“jQuery: Novice to Ninja”, 407 pages) – only for 24 hours (which I don’t know starting what hour, so, go quick!)


Get the book by putting your email here (you receive the PDF link by email):


Thanks Scott Hanselman (@SHanselman) for spreading on twitter, hence getting me to know about the book!


Have fun,

EgyGeeks Today’s Gathering, Delivering jQuery and ASP.NET. Open Talk About VS2010

Just wanted to give you a quick update on our next gathering today.

We’ll have the meeting in the same time like last week.

Today, Friday, April 16, at 11:59 PM.

The gathering will have the same style as the last one:

– The first 30 minutes will be a session: Jquery for ASP.NET Developers, by me

– The following 30 minutes will be an open talk, mainly around: Visual Studio 2010 Enhancements

So far we agreed to have the gathering the same way like last week (Using WEBEX website).


We’ll send you the URL by the exact time or the gathering, via the newly created EgyGeeks twitter account.


Also, follow this account for all upcoming gatherings’ news and announcements.

Thank you very much for attending CairoCodeCamp`10 – Session Slides

My first DotNetwork Cairo Code Camp in 2009 was a great experience, because it was one of the biggest events I’ve spoken at (in terms of audience count, similar to SilverKey Demo Day II). However, Cairo Code Camp 10 had a much different taste!


Not just that I met Scott Hanselman, one of the most popular Microsoft guys, and hold him down as you see in the picture (which I’ll never forget), the great person and popular guru…


Not just that I met so many great other speakers, many of them are my friends and some of my friends talking for the first time in such event or after long pause…


But also because we all (speakers and organizers – both volunteers) met so many great attendees. Some of them were interesting people I’ve followed on Twitter for some time and haven’t seen them yet. Some of them were old lovely faces that we meet very rarely (especially I no longer work  in Egypt). Some of them were totally new faces, bringing a lot of ideas and very useful discussions….

Thanks a lot everybody. You made Cairo Code Camp 10 the sweetest speaking experience yet for me. I really hope you had as much fun.

Give Me Those Slides

Now to the part you are probably reading this for! I promised the great guys who asked that the slides will be up on this blog in 3 days maximum after the event closing although probably they’ll be available by DotNEtwork pretty soon. So here they’re below.

It’s really sad we couldn’t get recording this event also. You can’t imagine how hard the setup for this can be. I may consider next time to buy an extra microphone and record the talk as a webcast, but usually things are not that easy.

Using jQuery To Survive In ASP.NET Webforms World

here are the slides hosted on SlideShare:

Session Downloads:

Download: Using jQuery To Survive In ASP.NET Webforms World.pptx

Download: Using jQuery To Survive In ASP.NET Webforms

It’s interesting how we went through jQuery all from beginning. I’m so happy the goal from this session was achieved, which is to show that jQuery can does regular tasks we see in many websites without much of the pain we picture in our heads once we think about JavaScript.

Introduction To ORM Patterns With Code Samples In NHibernate

Here are the slides hosted on SlideShare:

Session Downloads:

Download: Introduction to ORM Patterns with Code Samples in NHibernate.pptx

This session had three goals, one is to open minds about patterns and practices and choices instead of follows, which was accomplished. the second goal was to introduce some common ORM patterns, which was  partially accomplished. The 3rd goal was introducing NHibernate, which we didn’t have time to since the open talk was getting much more benefiting information.

I hope most of you liked how this went, and for the rest and everybody, would you like me to refer to existing NHibernate resources that I find most useful? (most of them are in the last slide in presentation), or create my own article on it? Or Screencast? And if so, would you like them to be in English or Arabic? (which reserving terms in English of course).

Tell me and I’ll work on something…

Thanks to all of you…

This event would never have been so great without the participation of every organizer, speaker and attendee. You guys created all the great atmosphere that I will be missing probably until the next big event – only if it has you or people as great as you were. Thank you very much for everything.

Related Resources

Usually the twitter accounts are the most updated of course (maybe more than you ask for sometimes), and the facebook group/page profiles are used for emailing members/fans with the more important news. By the way, my twitter username is @Meligy.

Thanks a  lot.

jQuery for Absolute Beginners: The Complete Video Series

image A great video series on all the nice effects (and functionality) you can achieve with jQuery JavaScript library for those who know NOTHING about it.

jQuery is a very powerful library. One of the first things I do when creating new project is to include the library in it. Microsoft is going to include it by default in ASP.NET web projects (All ASP.Net projects, not just MVC) starting Visual Studio 2010.

Here are some few examples of what you can do with it (VIDEO):

Have fun jQuerying…