How To Setup Angular Development Environment

There is some preparation required for Angular development. In the sections that follow, I explain how to get set up and ready to create your first project. There is wide support for Angular in popular development tools, and you can pick your favorites.

Installing Node.js

Many of the tools used for Angular development rely on Node.js—also known as Node—which was created in 2009 as a simple and efficient runtime for server-side applications written in JavaScript. Node.js is based on the JavaScript engine used in the Chrome browser and provides an API for executing JavaScript code outside of the browser environment.

Node.js has enjoyed success as an application server, but for this website, it is interesting because it has provided the foundation for a new generation of cross-platform development and build tools. Some smart design decisions by the Node.js team and the cross-platform support provided by the Chrome JavaScript runtime have created an opportunity that has been seized upon by enthusiastic tool writers. In short, Node. js has become essential for web application development.

It is important that you download the same version of Node.js that I use throughout this website. Although Node.js is relatively stable, there are still breaking API changes from time to time that may stop the examples.

The version I have used is 8.11.3, which is the current Long-Term Support release at the time of writing. There may be a later version available by the time you read this, but you should stick to the 8.11.3 release for the examples on this website. A complete set of 8.11.3 releases, with installers for Windows and macOS and binary packages for other platforms, is available at the click here

When you install Node.js, make sure you select the option to add the Node.js executables to the path. When the installation is complete, run the following command:

node -v

If the installation has gone as it should, then you will see the following version number displayed:

v8.11.3

The Node.js installer includes the Node Package Manager (NPM), which is used to manage the packages in a project. Run the following command to ensure that NPM is working:

npm -v

If everything is working as it should, then you will see the following version number:

5.6.0

Installing the angular-CLI Package

The angular-CLI package has become the standard way to create and manage Angular projects during development. In the original version of this book, I demonstrated how to set up an Angular project from scratch, which is a lengthy and error-prone process that is simplified by angular-CLI. To install Angular CLI, open a new command prompt and run the following command:

npm install --global @angular/cli@6.0.8

Notice: that there are two hyphens before the global argument. If you are using Linux or macOS, you may need to use sudo, like this:

sudo npm install --global @angular/cli@6.0.8

Installing Git

The Git revision control tool is required to manage some of the packages required for Angular development. If you are using Windows or macOS, then download and run the installer from https://git-scm.com/downloads. (On macOS, you may have to change your security settings to open the installer, which has not been signed by the developers.)

Git is already installed on most Linux distributions. If you want to install the latest version, then consult the installation instructions for your distribution at https://git-scm.com/download/linux. As an example, for Ubuntu, which is the Linux distribution I use, I used the following command:

sudo apt-get install git

Once you have completed the installation, open a new command prompt and run the following command to check that Git is installed and available:

git --version

This command prints out the version of the Git package that has been installed. At the time of writing, the latest version of Git for Windows and Linux is 2.17, and the latest version of Git for macOS is 2.16.3.

Installing an Editor

Angular development can be done with any programmer’s editor, from which there is an endless number to choose from. Some editors have enhanced support for working with Angular, including highlighting key terms and good tool integration. If you don’t already have a preferred editor for web application development, then Table 2-1 describes some popular options for you to consider. I don’t rely on any specific editor for this book, and you should use whichever editor you are comfortable working with.

Table 2-1. Popular Angular-Enabled Editors

Name	Description
Sublime Text	Sublime Text is a commercial cross-platform editor that has packages to support most programming languages, frameworks, and platforms. See www.sublimetext.com for details.
Atom	Atom is a free, open-source, cross-platform editor that has a particular emphasis on customization and extensibility. See atom.io for details.
Brackets	Brackets is a free open source editor developed by Adobe. See brackets.io for details
WebStorm	WebStorm is a paid-for cross-platform editor that integrates many tools so that you don’t have to use the command line during development. See www.jetbrains.com/webstorm for details
Visual Studio Code	Visual Studio Code is a free, open-source, cross-platform editor from Microsoft, with an emphasis on extensibility. See code.visualstudio.com for details.
Visual Studio	Visual Studio is Microsoft’s flagship developer tool. There are free and commercial editions available, and it comes with a wide range of additional tools that integrate into the Microsoft ecosystem.

When choosing an editor, one of the most important considerations is the ability to filter the content of the project so that you can focus on a subset of the files. There can be a lot of files in an Angular project, and many have similar names, so being able to find and edit the right file is essential. Editors make this possible in different ways, either by presenting a list of the files that are open for editing or by providing the ability to exclude files with specific extensions.

Installing a Browser

The final choice to make is the browser that you will use to check your work during development. All the current-generation browsers have good developer support and work well with Angular. I have used Google Chrome throughout this book, and this is the browser I recommend you use as well.