The Angular 2 quick start  walks you through setting up and running a very simple Angular 2 application. If you are trying to complete the quick start in Visual Studio Code (VS Code), there are a few extra steps to complete before you can build and run the application. This article discusses how to run the Angular 2 quick start application in VS Code using the lite-server NPM module. You can see the complete source code referenced in this article on GitHub in the briandesousa/angular2-quickstart-vscode repository.

The Angular 2 quick start is designed to get you up and running with Angular 2 using the a basic tool set – a console window and a text editor. There are several flavours of the quick start depending on the language you want to develop in. I have chosen to follow the TypeScript version of the quick start. After completing the quick start, you’ll end up with a file structure similar to this:

The quick start is designed to be run by calling npm start in the angular2-quickstart directory. The package.json is cleverly setup to concurrently launch the TypeScript compiler (in watch mode) as well as an instance of lite-server. Changes to any *.ts files in the workspace are automatically compiled by the TypeScript compiler and then served up by lite-server. You probably want VS Code to handle a few of these functions and avoid the need to call npm start:

1. When you save a *.ts file, VS Code should automatically re-compile your TypeScript files into JavaScript files.
2. When your run your application (ex. press F5 to debug), VS Code should start the lite-server for you.

Setup Automatic TypeScript Compilation

In order to setup TypeScript compilation in VS Code, you first need to create a tsconfig.json file that defines compilation settings, for example:

{
  "compilerOptions" : {
    "target" : "es5",
    "module" : "system",
    "moduleResolution" : "node",
    "sourceMap" : true,
    "emitDecoratorMetadata" : true,
    "experimentalDecorators" : true,
    "removeComments" : false,
    "noImplicitAny" : false,
    "watch" : true
  },
  "exclude" : [
    "node_modules"
  ]
}

The most important configuration in the tsconfig.json file is the watch attribute which tells the TypeScript compiler to monitor .ts files for changes and re-compile them as needed. Since the configuration does not specified which files to monitor, all .ts files in the angular2-quickstart directory or sub-directories are monitored.

After setting up your tsconfig.json, you need to setup a VS Code task that will invoke the TypeScript compiler (tsc) when a .ts file is saved. Press F1 to open the command prompt in VS Code and execute The Tasks: Configure Task Runner command. This command will generate a sample tasks.json file in the .vscode directory of your workspace. As luck would have it, the sample tasks.json is pre-configured with a task to run the TypeScript compiler leaving very little to do (this must be a very common task to setup). Here’s the sample task definition generated by VS Code:

// A task runner that calls the Typescript compiler (tsc) and
// Compiles a HelloWorld.ts program
{
  "version": "0.1.0",
  // The command is tsc. Assumes that tsc has been installed using npm install -g typescript
  "command": "tsc",
  // The command is a shell script
  "isShellCommand": true,
  // Show the output window only if unrecognized errors occur.
  "showOutput": "silent",
  // args is the HelloWorld program to compile.
  "args": [],
  // use the standard tsc problem matcher to find compile problems
  // in the output.
  "problemMatcher": "$tsc"
}

This task is exactly what we need and does not require any further modifications. You can test the configuration by making a simple change to the app/app.component.ts file and pressing CTRL-SHIFT-B to initiate the build process (or execute the Tasks: Run Build Task from the VS Code command prompt). Note that after the build process is kicked off, it will continue to run in the background. After a few seconds, you should see the app/app.component.js file is automatically re-compiled.

Setup VS Code to Launch Server

Now that your TypeScript files are compiling automatically, the next step is to configure VS Code to launch the lite-server so that you can view your compiled application in the browser. To achieve this, the default Launch configuration requires modifications.

Open the Debug view in VS Code. Ensure the Launch configuration is selected and click on the cog icon to configure it:

A sample launch.json file is generated in the .vscode directory. By default, the launch.json file should contain at least 2 launch configurations in a “configurations” array. The program property should be modified to launch the lite-server, for example:

"configurations": [
  {
    "name": "Launch",
    "type": "node",
    "request": "launch",
    "program": "node_modules/lite-server/bin/lite-server",
    ...

Since we are using VS Code to launch the server, there is an opportunity to do some clean up in the package.json file, namely:

• the contents of scripts property can be omitted, these scripts were originally being used to launch the TypeScript compiler and lite-server using the concurrently module
• the dependency on the concurrently module can be removed

A Word on Debugging in VS Code

After following the steps above, the Angular 2 quick start compiles and runs directly form VS Code however I have not yet figured out how to enable debugging. I would like to be able to place breakpoints directly in VS Code however currently those breakpoints are not being hit. I suspect this is related to the use of lite-server.