A well-prepared young man ready to start running. Cover photo by William Stitt on Unsplash.
Updated for Angular version 11.0.
Setting up an Angular development environment on Windows can be a hurdle. This guide walks you through the process step by step.
Back in November 2018, I volunteered as a mentor at ngHeroes. It was a rewarding experience helping newcomers from different backgrounds start their journey with Angular. Many were looking to switch careers, and I was pleasantly surprised by the number of women attending, given the industry's usual gender gap.
It's been seven years since I began as a software developer, but I still remember the initial challenges. What tends to fade, though, is the effort required to set up all the necessary tools for a productive start.
At ngHeroes, we helped participants with macOS, Linux, and Windows machines. We got everyone set up, not without a few hiccups. This article details the installation of tools and dependencies specifically for Angular development on Windows. On other operating systems, the process is largely the same, except for the build tools.
If you encounter any issues, feel free to leave a comment.
Install Node.js
Node.js serves as a JavaScript runtime for many web development tools.
Your first installation is Node.js, a JavaScript runtime capable of executing web servers, scripts, and console apps. Many web development tools are built on it.
Visit the Node.js website, which offers two packages based on your OS and CPU: LTS (Long-Term Support) and Current.
Here's a subtlety. While LTS is generally recommended, you might need a specific older LTS version. The Angular CLI (Command-Line Interface) has its own compatibility matrix, and you must install a Node.js version it supports.
Figure 1. Node.js support in Angular CLI. Open in new tab.
For a new project, you can target the newest Angular CLI version. Its package details can be checked on jsDelivr at this link for the latest Angular CLI. At the time of this writing, that is version 11.0. The package's metadata shows the required Node.js version.
Near the end of the JSON file, an "engines" object specifies the requirements for "node". For Angular CLI 11.0, it reads "node": ">= 10.13.0", indicating Node.js version 10.13 or higher is required.
Figure 1 shows that Angular CLI 11.0.x officially supports Node.js versions 10 and 12.
Since we're using the latest CLI, head back to the Node.js site, download the installer for the newest LTS version that Angular CLI supports, and run it as administrator.
If the installer asks about including Boxstarter or Chocolatey, do select it. The reason will become clear shortly. Be patient, as this part might take a while and could even require a system reboot.
To confirm the installation, open a terminal and run node --version to see the installed version.
Install Windows Build Tools
Installing Windows Build Tools with the NPM CLI.
Before installing the latest Angular CLI, we have another dependency to address.
Specifically, the node-gyp package relies on native compilation tools for pre and post install tasks of various packages, including Angular CLI.
On Windows, this means Python 2.7, Visual Studio Build Tools, and C++ Build Tools. The NPM CLI can install all of these together as one package.
If you included the Boxstarter or Chocolatey option during Node.js installation, these dependencies are already present. Skip to step 3.
To install the dependencies for Angular CLI, run the following command in a terminal. It uses the NPM (Node Package Manager) CLI, which you got with Node.js, to install from the public registry.
Ensure your terminal has administrator privileges. On Windows, right-click Command Prompt and select "Run as administrator".
NPM is the JavaScript equivalent of package managers like Composer (PHP), Maven (Java), NuGet (.NET), pip (Python), and RubyGems.
npm install --global --production windows-build-tools
Wait for the process to complete. It will display "All done!" when finished.
The build tools step is likely the only one that differs on non-Windows systems. For example, on Ubuntu and Debian you'd run sudo apt install gcc g++ make python2.
Install Angular CLI
Angular CLI is the development tool for building Angular applications.
With the build tools in place, we can now install the Angular CLI via the NPM CLI.
npm install --global @angular/cli
After installation, verify it with ng --version, which shows the installed Angular CLI version and its dependencies.
Install Git
Git is a widely-used distributed version control system.
Before creating a new project, it's wise to set up version control to back up your source code to a server and create restore points. This is essential for tracking progress and troubleshooting.
Git is an excellent choice, with great integration in the editor we'll use and native support in Angular CLI.
Download the installer from the Git website.
Install Visual Studio Code
The Angular Language Service extension brings IntelliSense to Angular templates in Visual Studio Code.
You'll need a code editor for development. Visual Studio Code, Microsoft's free editor, offers robust Angular and TypeScript support via extensions across Linux, macOS, and Windows.
Install the Stable Build from the Visual Studio Code website.
Be sure to also install the Angular Language Service extension, which provides IntelliSense for Angular templates.
Scaffold an Angular application
With all tools ready, we can finally create an Angular app. Open a command prompt and navigate to your desired parent directory.
Run the following Angular CLI command to generate a new project. Replace my-app with your chosen application name, which will also create a directory of the same name.
A crucial tip: avoid paths with spaces, like C:\Program Files (x86)\Angular. The Angular development server has trouble serving static files from such paths. Instead, use a space-free path like C:\Projects.
ng new my-app
The CLI will prompt you about routing. Most single-page applications (SPAs) benefit from routing. If you're a beginner, feel free to decline by answering n.
Next, it asks for a stylesheet format. CSS is the browser's native language, while SCSS is the most popular preprocessor. Select what you know, or choose CSS if you're just starting.
The process will take a few minutes as it downloads numerous tools and library dependencies required by Angular.
Time to start coding
Ready to develop. Try out the "Getting started with Angular" tutorial on Angular.io.
Your development environment is now complete! Open the project directory in Visual Studio Code.
To preview your work, you'll use a development web server. Angular CLI includes one, which you can start from the project's root directory with:
npm start
This is an NPM script shortcut for the command:
ng serve
Once compiled, open your browser to http://localhost:4200 to view the app.
The server watches your files; saving changes automatically triggers a browser refresh.
To stop the server, press Ctrl+C, then type y and press Enter.
The start script is defined in package.json. You can modify it to ng serve --open to automatically open the browser. Save the file and run npm start again.
From here, it's all about building. If you're low on ideas or confidence, try the "Getting started with Angular" tutorial.
Additional learning resources
For managing your code, consult the guide on "Version Control in Visual Studio Code".
Angular.io hosts comprehensive development guides for the framework.
Angular CLI can also generate components, directives, modules, pipes, and services. See the Angular CLI documentation for details.
Always back up your work by committing and pushing to a remote. GitHub, GitLab, and Bitbucket all provide free private repositories for individuals.