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

Are you building Software Developers or Coders?

If we start with the premise that a “Software Developer” is someone who can..

  • Interact with the business
  • Understand when/where/why to use X/Y/Z (technology, pattern, process, etc)
  • Create a solution they can be proud of

and a “Coder” is someone who can..

  • Sit in a chair and write the code that is requested of them

then I think as a team lead it’s important that you decide what you want your team to be made up of.  There are probably places out there where a “Coder” is exactly what the company wants/needs but personally I never want to work at a place like that.

The reason I bring this up is because I am trying to move from “Team Manger/Paper Pusher” to “Team Lead” and for me a large part of that is worrying about the other team members and helping them to improve.  Team members (whether they be Permanent or Contractors) need/want/should be allowed to improve their skillset.  And I’m not talking about whatever new shiny framework the Front End world has spit out (though those are fun and important as well) but also other important skills like..

  • Interacting with the business
  • Understanding why you/the solution architect/whoever are making the decisions they are making
  • How the solution you are building together will be something they can be proud of
  • A million other things not related to writing code but critical in creating a correct and  maintainable solution

So if you’ve been managing a team and are also interested in starting to leading them then I’d suggest there is value in sitting down and deciding if you need to make more of an effort to help others develop the skills they may be missing on their path to being true Software Developers.

Are you building Software Developers or Coders?

Returning of the living dead blog…

So a long time ago I tried blogging.  Then I gave up.  Then I tried again.  And then I moved to another url but that company has been shut down and I spent a year learning that..

1) I feel really sorry for the people who inherited some of the over-engineered systems I’ve left in my wake in what based on my experiences is typical contractor style.  A lot of the tools/techniques that were used have their place but only if you properly take into account who will be responsible for code maintenance, what their (and the business appetite) is for education and how complex the system is going to be.

2) I CAN manage people.. I just need more time to get great at it.

3) Being responsible as an (unofficial) Operations Lead can teach you a lot about what makes a system pleasant/unpleasant to maintain in the wild.

4) I hate “Frameworks” with a passion.  Especially ones that think they need to rewrite state management.

So with all that (and much more) learning under my belt I think there may be something I can contribute to the world of development.

Returning of the living dead blog…

Post May & Pre June

Well May was a pretty good month. One of the items on my list that I couldn’t list publicly was that I wanted to make the transition to contracting. Well the good news is that I have successfully made the transition. I’ve started on my first one year contract and things are going great so far. The team itself is really good and even though it’s a bit early to say I think contracting is a better fit for me.

The switch to contracting actually has taken a lot of time and energy. That would be why things have been so dead around here and why I wasn’t able to complete all my goals for May.

May:

  • Finished the Applying UML and Patterns book.
  • Made the transition to contracting!
  • Switched over to waking up at 5:30 AM.

June:

  • Finish reading Refactoring to Patterns. This book won a Jolt award and I can see why after having read the first few chapters.
  • Start swimming once a week in the mornings at a pool near me. This might require I wake up at 5 AM but that’s the price of getting healthy.
  • Turn in my Time sheet on time!
Post May & Pre June