This guide walks through the process of establishing a robust development environment to ensure a smooth and productive experience when learning and working with Angular.
A well-configured environment is arguably one of the biggest hurdles for newcomers to the Angular ecosystem—sometimes even more challenging than getting to grips with reactive programming concepts. Getting this foundation correct from the start is essential.
Our goal is to set up a development environment that is straightforward to maintain and upgrade, minimizing future issues that can stem from semantic versioning and dependency drift.
In this post, we will cover the following steps:
- Setting up a Node development environment
- Installing and learning about the Yarn Package Manager
- Installing the Angular CLI
- Creating our first "Hello World" Angular application
- Setting up an IDE, specifically WebStorm
For those looking to install Angular within the constraints of a corporate network, this post provides helpful tips for doing so without admin rights.
This is part of our ongoing "Angular for Beginners" series. You can find the complete list of articles here:
-
Angular For Beginners Guide - Getting Started (Setup Environment)
-
Why a Single Page Application, What are the Benefits? What is a SPA?
Establishing a Node Development Environment
For the optimal development experience, if you don't have Node installed yet, I recommend heading over to the nodejs.org website and downloading the latest version.
Be sure to choose the latest version rather than the long-term support (LTS) version. Since we'll be using Node for frontend tooling and running our development server, the newest release typically presents fewer compatibility issues.
However, if you already have some version of Node installed, there's a more elegant solution than running another installer—which might not even be possible on a work computer. To sidestep the hassle of repeated reinstallations, I suggest using a command-line utility that allows you to easily switch between different Node versions.
Why opt for a command-line node versioning tool?
Using such a tool provides several key benefits:
-
It makes it incredibly easy to switch Node versions when you're juggling multiple projects, each requiring a different version of the runtime.
-
Future upgrades to newer Node versions become trivial, eliminating the need to run an installer again.
Before we start, let's ensure you have at least some version of Node installed on your system.
Installing the Nave Command Line Tool
For Linux or Mac users, let's install the nave command line tool, which is available via npm. The installation command is:
npm install -g nave
Keep in mind that on certain systems, you might need to prepend "sudo" to these commands if you don't have administrator privileges.
For Windows users, an equivalent tool called nvm-windows provides similar functionality:
With a version-switching tool in place, we can now install a specific Node version. For example, let's install version 7.9.0 and start a new shell using it:
> nave use 7.9.0
#################################################### 100.0%
installed from binary
> node -v
v7.9.0
If you're using nvm-windows, the command would be:
nvm use 7.9.0
In both scenarios, the outcome is identical: we've launched a new shell with our chosen Node version on the path.
If you're on Windows and want a Bash shell that can be installed without admin privileges, check out Git Bash.
This setup will make future version upgrades effortless—a great start! Let's now continue building the foundation of our development environment.
While npm is the official Node package manager, we'll be using a different alternative. Let's explore why we'd choose the Facebook-developed Yarn Package Manager instead.
Why Choose Yarn Over NPM?
Using npm, you might occasionally encounter these frustrating situations:
-
An
npm installcommand fails with a cryptic error, but running it a second time works fine. While proxies and network issues are common culprits, this isn't always the cause. -
You have a project that works perfectly in one folder, but when you clone the same code to another location and run the install, it fails due to dependency problems.
-
Your build fails on a production or staging server due to dependency errors that never occur on your local machine.
-
Another developer on your team experiences dependency issues while your setup works flawlessly, or vice versa.
These problems all trace back to some inherent flaws in how npm handles dependencies by default.
The core difference between Yarn and NPM
npm relies on semantic versioning, which means it accepts a range of versions for a given dependency when you install it. While the idea is to automatically receive patch updates, this approach doesn't always work as well in practice as it does on paper.
Facebook encountered these very issues in their internal builds. This led them to develop an alternative package manager, which they tested extensively internally before open-sourcing it: The Yarn Package Manager. Let's try it out and see what it offers. To install Yarn, we can run:
npm install -g yarn
Yes, we're using npm to install Yarn, and it will likely be one of the last times we do so. Now that we have Yarn installed globally, let's make it our go-to package manager. Unlike npm, Yarn "freezes" the dependency tree, ensuring that the code running in production, on a teammate's machine, and on your local machine is identical.
How Does Yarn Function Then?
It's quite straightforward: upon installation, Yarn writes the exact dependencies it has installed to a file named yarn.lock. To install a project's dependencies and generate this lock file, we simply need to run the following command in the directory containing our package.json:
yarn
This command performs a similar function to an npm install:
-
It reads the
package.jsonand calculates a tree of library dependencies. -
It downloads all project dependencies and places them in the
node_modulesfolder.
So far, npm does the same thing. What makes Yarn different?
Two Immediate Advantages of Yarn
Even if Yarn offered nothing else, it would already provide two significant benefits:
-
Yarn is considerably faster than npm, particularly for projects with numerous dependencies, like those scaffolded with the Angular CLI.
-
With Yarn, you’ll no longer face the common situation of having to run
npm installmultiple times until it works (interspersed with cache cleanups) or having to deletenode_modulesand start over.
Yarn's Biggest Advantage
The improvements in speed and reliability alone make Yarn a compelling choice. However, its true standout feature is how it tracks dependencies during installation. Yarn meticulously records the exact version of every library it downloads into a text file known as a lock file. You'll find this file right next to your package.json after the installation process completes.
Important notes about the yarn.lock file
This is a plain text file, and here are a few key points to understand about it:
-
It should never be edited manually. Only Yarn, driven by commands you execute, should modify it.
-
It is crucial to commit this file to your source control repository.
So, what’s the big deal about having a lock file? Committing the yarn.lock file ensures that every developer working on the same codebase will have the exact same dependencies as you. This is incredibly valuable, as problems caused by library version differences are far more common than you'd think. And consider the alternative: when your continuous integration build fails because of version mismatches between your dev machine and the build server, debugging that would be a nightmare—especially when you don't have access to the server's file system.
Yarn Advantages in a Nutshell
Using a lock file to pin down the dependency tree on every machine sidesteps countless, time-consuming problems. In summary:
Yarn provides faster, more reliable, and most importantly, reproducible builds. This means you will never have to debug issues that stem from different libraries being present on different machines.
For a guided tour on setting up Yarn, you can refer to this video:
A Note on Npm Shrinkwrap
As a final note on npm, it is technically possible to lock down dependencies, but the process is reportedly not deterministic. The Yarn documentation's guide on migrating from npm has more on this:
If you are using an npm-shrinkwrap.json file right now, be aware that you may end up with a different set of dependencies. Yarn does not support npm shrinkwrap files as they don’t have enough information in them to power Yarn’s more deterministic algorithm.
The same documentation also highlights the positive attributes of the Yarn lock file:
It’s similar to npm’s npm-shrinkwrap.json, however, it’s not lossy and it creates reproducible results.
That should make a strong case for using Yarn instead of npm. Next, we'll continue building our environment by installing the Angular CLI (and configuring it to use Yarn) and setting up an IDE.
Installing the Angular Command Line Interface
With a package manager in place, let's use it to install everything else we need. To install the Angular CLI—a command-line tool for scaffolding Angular applications—run the following:
yarn global add @angular/cli
If this step succeeded, the Angular CLI should now be available on your command line. Running this command should show you the following:
>ng --version
This will output the version of the CLI you've just installed.
WARNING: Yarn is a relatively new tool. If you run into trouble installing global dependencies, like not being able to locate the CLI executable, you can always fall back to npm for this one step:
npm install -g @angular/cli
This should be a temporary measure. Now, let's put the CLI to use.
Note: This blog post is part of a larger ebook on Angular.
Scaffolding Our First Angular Application Using the Angular CLI
The CLI creates a standard project structure and sets up a working build. This build requires dependencies, which are downloaded via npm by default. It's wise to configure the CLI to use Yarn from the outset:
ng set --global packageManager=yarn
Now, whenever we use the Angular CLI's commands, it will use Yarn under the hood. This makes our builds faster and reproducible. Let's scaffold our first application:
ng new hello-world-app
This might take a moment, but it will create a new project structure and install all necessary dependencies in one go. After this, we have a ready-to-use project! We can launch our application by running:
cd hello-world-app
ng serve
The ng serve command starts a development server on your localhost port 4200. By navigating to the following URL in your browser:
http://localhost:4200
You should see a blank screen with the message "app works!".
We'll review this application step-by-step in a future post. But wouldn't it be better to explore the application within our final development environment first? So let's get that set up now, and we'll continue from there.
Setting Up an IDE – Webstorm or Visual Studio Code
There are several excellent IDEs available. For instance, Microsoft Visual Studio Code is a free and popular option, available here:
There’s also the WebStorm IDE, which comes in several versions you can try. Here's the link for a free trial:
https://www.jetbrains.com/webstorm
And here's the free Early Access Program (EAP) edition, which includes all the latest, not-yet-released features of the upcoming version. These early access builds are surprisingly stable despite their name:
https://confluence.jetbrains.com/display/WI/WebStorm+EAP
After installing an IDE, simply open the folder containing your Angular CLI project, and it will be recognized as a new project. WebStorm, for example, will automatically detect the TypeScript version your project uses within node_modules and leverage that to compile your code and display errors.
An important feature of our IDE environment
This automatic detection means there's no need to manually configure TypeScript, which helps you avoid the risk of having different compiler behaviors between the command line and the IDE. This is exactly what we want to prevent, especially for beginners in the Angular ecosystem. A smooth installation and an IDE that "just works" are crucial for a positive initial experience. WebStorm also offers excellent Angular integration. For instance, you can jump from a template directly to a method in your component class.
WebStorm installation should be seamless. With this in place, we now have a complete development environment ready for our exploration of the Angular framework.
Conclusion and What’s Next
At this point, you should have a solid development environment ready to go. If you encountered any issues, please let me know in the comments below.
Let's proceed by dissecting the application we just generated: what is the purpose of all those files? You might be thinking that's a lot of files and steps for just one "Hello World" app, right? Let's use the generated application to address this, as it's an important question to answer:
What is the advantage of using Angular when compared to jQuery for example?
Let's find out, because even in this simple application, there is one killer Angular feature at play that is arguably the biggest differentiator from previous-generation technologies. I hope this post has been helpful in getting your development environment set up. And as a reminder, this post is part of the ongoing Angular for Beginners series:
-
Angular For Beginners Guide - Getting Started (Setup Environment)
-
Why a Single Page Application, What are the Benefits? What is a SPA?
We invite you to subscribe to our newsletter to get notified when more Angular posts come out:
If you are just getting started learning Angular, have a look at the Angular for Beginners Course:
Other posts on Angular
Have also a look also at other popular posts that you might find interesting:
- Why a Single Page Application, What are the Benefits ? What is a SPA ?
- Angular Smart Components vs Presentation Components: What's the Difference, When to Use Each and Why?
- Angular Router - How To Build a Navigation Menu with Bootstrap 4 and Nested Routes
- Angular Router - Extended Guided Tour, Avoid Common Pitfalls
- Angular Components - The Fundamentals
- How to build Angular apps using Observable Data Services - Pitfalls to avoid
- Introduction to Angular Forms - Template Driven vs Model Driven
- Angular ngFor - Learn all Features including trackBy, why is it not only for Arrays ?
- Angular Universal In Practice - How to build SEO Friendly Single Page Apps with Angular
- How does Angular Change Detection Really Work ?