Setting Up an Angular Development Environment

Angular
Team CNC
15 December 2024
0
9 minutes read

Angular is a popular front-end framework used for building dynamic web applications. Setting up a proper development environment is the first step to working efficiently with Angular. This guide will walk you through installing the necessary tools and setting up your first Angular project.

1. Prerequisites

Before setting up Angular, ensure you have the following installed on your system:

Node.js and npm: Angular requires Node.js and its package manager (npm) to install dependencies and run development tools.
Angular CLI: A command-line tool to create, develop, and manage Angular projects efficiently.
Code Editor: Visual Studio Code (VS Code) is recommended for its Angular support and extensions.
Browser: A modern web browser like Chrome or Firefox for testing the application.

2. Installing Node.js and npm

Angular relies on Node.js for package management and running development tasks.

Check if Node.js is Installed

Open a terminal or command prompt and run:

node -v

If Node.js is installed, it will display the version. Similarly, check for npm:

npm -v

If Node.js is not installed, download and install the latest LTS (Long-Term Support) version from the official website:
Download Node.js

The installation includes npm by default.

3. Installing Angular CLI

Angular CLI (Command Line Interface) simplifies project setup, configuration, and management.

To install Angular CLI globally, run:

npm install -g @angular/cli

Verify Installation

Check if Angular CLI is installed correctly by running:

ng version

This command displays the installed Angular CLI version along with other environment details.

4. Creating a New Angular Project

Once Angular CLI is installed, create a new Angular application using the following command:

ng new my-angular-app

Project Configuration Options

During the setup, Angular CLI may prompt for additional configurations:

Would you like to add Angular routing? – Type Yes or No depending on your project needs.
Which stylesheet format would you like to use? – Choose one (CSS, SCSS, SASS, LESS).

After completion, navigate into the project directory:

cd my-angular-app

5. Running the Angular Application

Start the development server with:

ng serve

By default, the application runs on http://localhost:4200/. Open the URL in your browser to view your Angular project.

6. Understanding the Angular Project Structure

A newly created Angular project contains the following directories and files:

src/ – Main source folder containing the application code.
app/ – Contains components, modules, and services.
assets/ – Stores static assets like images and stylesheets.
environments/ – Configuration files for different environments (development/production).
angular.json – Project configuration settings.
package.json – Lists dependencies and scripts.

7. Installing Additional Dependencies

To add third-party packages, use npm. For example, install Bootstrap for styling:

npm install bootstrap

To use Bootstrap in the project, add it to angular.json:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

8. Setting Up an Angular Component

Generate a new component using Angular CLI:

ng generate component my-component

This command creates:

src/app/my-component/my-component.component.ts (Component logic)
src/app/my-component/my-component.component.html (Template)
src/app/my-component/my-component.component.css (Styles)

Modify my-component.component.html to display a message:

<h2>Welcome to Angular!</h2>

Then, use it in app.component.html:

<app-my-component></app-my-component>

9. Using Visual Studio Code for Angular Development

Installing Angular Extensions

In VS Code, install useful extensions from the Extensions Marketplace:

Angular Language Service – Provides code completion and error checking.
ESLint – Helps maintain clean and consistent code.

Using Integrated Terminal

Open VS Code and use Terminal > New Terminal to run Angular CLI commands without switching windows.

10. Configuring Git for Version Control

To manage code efficiently, initialize a Git repository:

git init
git add .
git commit -m "Initial Angular setup"

To push the project to GitHub:

git remote add origin https://github.com/your-username/your-repo.git
git push -u origin main

11. Building and Deploying an Angular Application

To build a production-ready application, run:

ng build --configuration=production

This generates an optimized dist/ folder, which can be deployed to a server or hosting platform like Firebase, Vercel, or Netlify.

Conclusion

Setting up an Angular development environment involves installing Node.js, Angular CLI, and a code editor, followed by creating and running an Angular project. With a well-configured setup, you can efficiently develop, test, and deploy Angular applications.