How I got “Getting started with Angular 2 developer preview” working on Windows

I’m currently looking into Angular 2 and Aurelia and as part of this investigation I was going through the Getting Started with Angular 2 developer preview video on YouTube.  In the original video he uses OSX but I wanted to make it work under Windows 7.  Here are the additional steps I had to do.

1. My NPM was out of date.  I followed the official upgrade instructions and did an

npm install npm@latest

but then I ran into a problem with my C:\Users\<username>\AppData\Roaming\npm install not taking precedence no matter what order I changed my PATH to.  At this point I nuked the node installed npm/npm.cmd and kept going as I didn’t have time to worry about this.

2. Next up I couldn’t get the tsc -w to work as it wasn’t supported on my version of TypeScript (1.0.3.0).  I threw caution to the wind and installed the 1.5 beta.  It was at this point I ran into the same version precedence problem that I did with npm.  Luckily this time I realized that the problem was in the system path vs user path.  I ended up having to modify the system path and was able to get tsc 1.5.0-beta running.

THEN with all that completed I tried tsc –watch and was rewarded with

error TS5001: The current host does not support the '--watch' option

It was surprisingly hard to find out what this meant but I was able to find an issue on the TypeScript GitHub repo with a suggestion that this should work without having to use node.  So no –watch support for now but there are other options available to us.  I expect I’ll be switching to either the node solution or a Gulp script for my real project but for now I went with the manual build step detailed in the article “Using TypeScript in Visual Studio Code“.  I had to restart VS Code to get it to find tsc 1.5-beta as I had started it before fixing the path.

3. I downloaded the Zip from https://github.com/Microsoft/ngconf2015demo to get firebase.  From that I was able to get the firebase directory he copies over.  Interestingly enough if you already have your import statement in your todo.ts you’ll need to remove the ‘firebase/angularfire’ and re-add it to get the red squiggly to go away.

import {AngularFire, FirebaseArray} from 'firebase/angularfire';

4. Next up was to get the sample running.  At this point I was definitely not interested in going the IIS route so a quick bit of Googling later I had found LibMongoose.  It’s a light weight HTTP server that you drop into the directory and run.  Another option if you like the command line is doing this:

npm install http-server
http-server -a 127.0.0.1

The -a 127.0.0.1 is required if you are using Chrome as the default is 0.0.0.0 and Chrome won’t navigate there.

5. At around 9:10 into the video I got a bit confused.  When he brings up the page it looks nice and pretty but he didn’t actually copy the css directory over?  I had to copy it over and then everything looked purdy.

6. I suspect I may have missed a step in the video so at this point everything may work fine for you but this is where I got really stuck.  I would run the server but the page wouldn’t work and in my console I started getting the following error:

No provider for AngularFire! (TodoApp -> AngularFire)

I ended up having to download the original demo to find the solution but the fix was to modify the tsconfig.json file that he creates at the end with this change:

"files": [
   "todo.ts",
   //"typings/angular2/angular2.d.ts" -- removed this line
   "typings/tsd.d.ts" // added this line
]

After that I was able to run the http-server and the page worked great.  The difference is that the tsd.d.ts file references everything you added via tsd –save which in our case includes firebase.d.ts which I didn’t have in my file.

So with a little bit of elbow grease I was able to get this same working and now have a better understanding of the mechanics of creating an Angular 2 app.  Next step is to start doing the real thing.

Advertisements
How I got “Getting started with Angular 2 developer preview” working on Windows

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s