Modern Angular 02: Environment Setup
This is lesson 2 of the Modern Angular Course. Now that we covered what changed in Angular v21+, it is time to get practical. In this post, we set up a modern Angular development environment using the defaults Angular expects you to use today.
This post is part of the Modern Angular Course series. Check the course page for the full episode list.
In this post, we cover:
- How to install Node.js the right way (with a version manager)
- How to install and use the Angular CLI
- Recommended VS Code extensions for Angular development
- How to create a modern Angular v21+ project
- What the default project structure looks like
- How Vitest is set up as the default test runner
Prerequisites
Before we start, you only need three things:
- Node.js (LTS version)
- A code editor (VS Code recommended)
- A terminal
That is it. No special global tools, no legacy setup.
If you want to try Angular before installing anything locally, you can use the online tutorial on StackBlitz. It runs entirely in the browser.
Installing Node.js (Use a Version Manager)
I strongly recommend installing Node using a version manager instead of downloading it directly from the Node website. This avoids permission issues and makes it much easier to switch Node versions later when working across multiple projects.
- macOS / Linux: use nvm (Node Version Manager)
- Windows: use Chocolatey or nvm-windows
Once installed, verify your Node version:
1
node -v
Angular v21+ works best with the current Node LTS. If your version is older, upgrade now — it will save you time later. You can check Angular’s version compatibility guide for the exact supported range.
Windows users: If you run into permission issues or scripts not executing, consider using WSL (Windows Subsystem for Linux) for a smoother experience. If you prefer to stay in PowerShell, you may need to set the execution policy:
Installing the Angular CLI
Next, install — or update — the Angular CLI globally:
1
npm install -g @angular/cli
To verify the installation, run:
1
ng version
This should print the Angular CLI version along with your Node and OS details. If you see the output, you are good to go.
The CLI is opinionated now, and that is a good thing. It sets up standalone components, modern testing, and strict defaults for you out of the box.
Recommended VS Code Extensions
If you are using VS Code (which I recommend), there are two extensions worth installing right away:
Angular Language Service — this is the official extension from the Angular team. It gives you autocompletion, error checking, and go-to-definition inside Angular templates. Once you start writing HTML templates with bindings and signals, you will appreciate having real-time feedback directly in the editor.
Angular Extension Pack — this is my own extension pack that bundles the Angular Language Service along with other useful extensions for Angular development, including code snippets, Vitest support, auto rename/close tags, ESLint, Prettier, and more. Instead of installing extensions one by one, you get a curated set that works well together.
You can install either one from the Extensions panel in VS Code (Ctrl+Shift+X or Cmd+Shift+X on macOS) by searching for the extension name.
Creating a Modern Angular Project
Generate a new project:
1
ng new modern-angular
When the CLI asks:
- Enable routing → Yes
- Stylesheet format → CSS or SCSS (your choice)
- Keep the remaining defaults
Angular v21+ defaults are already optimized for modern development. The less you fight them, the better the experience.
Project Structure Overview
After generation, open the project and notice what is different from older Angular:
- No
NgModulefiles — modules are gone from the default setup bootstrapApplicationinstead ofbootstrapModule— the entry point is simpler and more explicit- Clean
main.ts— minimal bootstrapping code - Standalone
AppComponentby default — every component is self-contained
Angular is fully embracing a simpler, more explicit architecture. If you are used to AppModule and declarations arrays, this will feel like a breath of fresh air.
From here, you will use ng generate (or ng g for short) to create components, services, pipes, and more. We will use it throughout the course.
Testing Setup (Vitest)
One thing to highlight right away is testing. Angular v21+ uses Vitest as the default test runner, replacing Jasmine and Karma. This means:
- Faster test execution
- Modern developer experience
- Familiar tooling if you have used Vite or Jest
We will go deep into testing later in the course — for now, just know it is ready out of the box.
Running the App
Start the development server to make sure everything works:
1
ng serve --open
The --open flag (or -o) automatically opens your browser to http://localhost:4200. You should see your Angular v21+ app running.
Source Code
The full source code for the course is available on GitHub: loiane/modern-angular.
Next Step
In the next lesson, we build our first standalone component and start using signals from day one. That is where Angular really starts to feel different.