Angular 2: Setting Up Your Windows Development Environment

Posted on by

Angular 2 is a development platform for building mobile and desktop web applications. If you’re not familiar with Angular check out https://angular.io for a quick overview. You need to set up your development environment before coding, so I’ll run through the steps required and hopefully help you to avoid some of the issues you might come across. I’ll cover the following steps:

You may have some of these components installed already, but it’s important to have the right version, so don’t skip those sections.

Installing Node.js

Node is a JavaScript runtime and a dependency for npm – the package manager we will use for development. Fire up a new PowerShell or Cmd prompt and execute the following command:

    node -v

If you see a node is not recognized error – then it’s not installed. Otherwise, check if you have the latest version by visiting https://nodejs.org/en/download/. Currently, the latest version is 4.4.2.

Note: If you need to update Node to the latest version, first check to see if you have the 32-bit (C:\Program Files (x86)\nodejs) or 64-bit (C:\Program Files\nodejs) version installed. Make sure you download the correct version or you’ll end up with both installed.

To install or upgrade visit https://nodejs.org/en/download/ and select the appropriate version (typically LTS 32-bit or 64-bit). Verify that the installation was successful by opening a new command prompt and running node -v again.

Upgrading npm

Npm is the recommended package manager for Angular 2 development. Although Node comes with npm installed, npm is updated more frequently then Node is, so you’ll still need to check that it’s the latest version. To do so, execute the following command using:

    npm -v

Currently, 3.8.3 is the latest version. To upgrade npm, run PowerShell as an administrator and execute the following commands:

    Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force
    
    npm install --global --production npm-windows-upgrade
    
    npm-windows-upgrade

When the upgrade completes, verify you are now running the latest version by running npm -v again. If you would like more information, take a look at the npm-windows-upgrade page for detailed instructions.

Installing TypeScript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It supports the latest evolving JavaScript features, including those from ECMAScript 2015. Angular 2 was built using TypeScript. First, check to see if it’s installed by opening a new command prompt and executing:

    tsc -v

If you see a tsc is not recognized error – then it’s not installed. TypeScript can be installed using npm by executing the following command:

    npm install --global typescript

You can check the installed version again by running tsc -v.

Installing Git

Git is a free and open source distributed version control system. First, check to see if you it’s installed by opening a new command prompt and executing:

    git --version

If you see a git is not recognized error – then it’s not installed. It can be installed by visiting https://git-scm.com/downloads/ and clicking Download for Windows.

Installing Visual Studio Code

Visual Studio Code is a free editor optimised for building and debugging modern web applications. Visit https://code.visualstudio.com and click Download for Windows. View the Get started with Visual Studio Code for a quick overview of the core concepts.

Testing your development environment

In order to verify that everything has been set up correctly, follow the instructions below to clone, install, and start the official Angular 2 QuickStart web application. Begin by opening a new command prompt, navigating to your source code folder (e.g. c:\code), and then execute the following commands:

    git clone https://github.com/angular/quickstart
    cd quickstart
    npm install
    code .
    npm start

Running npm install gets all required dependencies for the application. Running code . opens the current folder in Visual Studio Code. When you run npm start, a new browser window will be displayed with the message My First Angular 2 App indicating that your development environment has been correctly set up. If not, double check all of the steps above and try again. If you would like more information take a look at the Angular 2 QuickStart page for detailed instructions.

Recommended resources

You’re now ready to get started coding Angular 2 applications! There are a lot of great resources available, but I recommend heading straight to the official documentation to follow the 5 Min Quick Start. You’ll learn the basics and finish with an ideal starter template for your next project.

After the quick start, take a look at the following resources:

Thanks for taking the time to read my post. Feel free to leave any comments or questions below.