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:
- Installing Node.js
- Upgrading npm
- Installing TypeScript
- Installing Git
- Installing Visual Studio Code
- Testing your development environment
- Recommended resources
You may have some of these components installed already, but it’s important to have the right version, so don’t skip those sections.
Cmd prompt and execute the following command:
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.
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:
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.
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
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:
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
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.
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:
- The official Tour of Heroes Tutorial
- The official Angular Cheat Sheet
- Egghead.io’s free Angular 2 Fundamentals course
- SSW TV’s Angular 2 webinars
- Pluralsight’s Angular 2 courses
Thanks for taking the time to read my post. Feel free to leave any comments or questions below.