Running the Angular 2 Quickstart tutorial in Visual Studio Code on Mac OS

In this post I will go through the steps that I took in order to complete the Angular 2 Quickstart tutorial (with Typescript) using Visual Studio Code on Mac OS. The versions for the software are as follows:

• VS Code: 1.2.1
• Mac OS: 10.11.5 (El Capitan)

The Angular 2 quickstart can be found at this link: https://angular.io/docs/ts/latest/quickstart.html.

We start by creating a new solution, which in VS Code is opening a folder. In the tutorial they named the folder angular2-quickstart. It doesn't really matter, so just make a new folder.

After this we need to follow the next few steps in order to have the solution up and running in VS Code.

1. Compiling the Typescript code to Javascript.

Open Command Palette with ⇧⌘P (or View -> Command Palette) and start typing Configure Task Runner.

Then, select Tasks: Configure Task Runner and you will get the next list:

From here you need to select TypeScript - tsconfig.json. This will create a tsconfig.json under the .vscode folder.

2. Installing NodeJs and npm (if you don't already have it).

This tutorial states that you need to have at least version 5.x.x for NodeJs and 3.x.x for npm. To check if you have the required version, open a terminal window (or the Integrated Terminal in VS Code) and type node -v for NodeJs and npm -v for npm.

From here on I have followed the steps in the tutorial. 

In order to be able to run the application from VS Code a few additional steps are required:

1. Click on the Debug icon on the left side.

2. Click on the cog icon and select NodeJs from the list. This will create a file called launch.json under the .vscode folder.

Note: if you click the cog icon again, nothing will happen. If you want to see the available options again, delete the launch.json file.

3. In the launch.json file, edit the program property so that it looks like this: ${workspaceRoot}/node_modules/lite-server/bin/lite-server

4. Click on the start icon and the application should start.