Setting up the environment

Before I can write any Angular 2 code I need to set up a development environment. Bucky recommends using WebStorm but, quite frankly, it’s a) out of my price range and b) I just prefer to use the Visual Studio environment. So I’m going to set up an Angular 2 project using Visual Studio. Now, this task isn’t as simple as it sounds. I spent a lot of time trying to get it all up and running and what I found was that it’s really not as easy as it looks.

That was until I came across this post by Ibrahim Uludag. It shows a nice, easy way to get started using Visual Studio. I then spent a bit of time trying to get it running using MVC. I was unsuccessful. I’ll update you on progress when (if?) I ever get back to it.

So, I went ahead and just used Ibraham’s method and I was up and running in a few minutes, but with two caveats:

1. You will most likely encounter an error. It goes like this:

error TS2661: Build: Cannot re-export name that is not defined in the module

After a quick googling I found that this is a common problem and the solution is equally as simple (thanks to sicaner on GitHub for providing it):

In the file node_modules/angular2/src/fa├žade/promise.d.ts add the following line to the beginning of the file:

declare var Promise: PromiseConstructor;

This took care of it for me.

2. Unlike Bucky’s environment which automatically retranspiles the TypeScript code, the Visual Studio environment only transpiles when the application is started. Therefore, whenever you make a change to your TypeScript file you need to restart the application in order to generate the new JavaScript files.

Another thing to note is that you can shortcut Ibrahim’s method of getting the Angular 2 libraries by right-clicking on the packages.json file and selecting “Restore Packages”. I found this much easier than his method and it still has the same effect (this is assuming that you’re using Visual Studio 2015 Community Edition, which I am).

Also, a quick note on TypeScript. You can find out plenty about TypeScript with a Google search but just be aware that Angular 2, unlike AngularJS (or Angular 1) is built on top of TypeScript whereas AngularJS was built on top of JQuery (I think – correct me if I’m wrong). Therefore, learning a little about TypeScript is rather important.

Here’s a quick overview: TypeScript, developed by Microsoft, is a language which, when transpiled, gets converted into raw JavaScript (browsers only understand JavaScript). Note that it is “transpiled” and not “compiled.” “Compiled” means to turn it into machine language. “Transpiled” means it gets converted into another language which is then “interpreted” on the client’s machine into instructions that the computer can understand.

TypeScript allows the user to write code using traditional Object-Oriented techniques instead of the more cryptic Prototype ideology that JavaScript employs.

Now, something you might encounter is that your changes don’t look like they’re being applied. This is most likely because of the browser cache – when the TypeScript is transpiled it creates a JavaScript file. Your browser looks at the file and says to itself “oh, I already have that file – I don’t need it” so it won’t get the most recently transpiled version. To prevent this, disable your browser’s cache.

Next, let’s go through Bucky’s lessons, one by one.

See the code

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *