Environment Setup in Angular

his chapter explains how to set up the Angular development environment, including installation of Node.js and Angular CLI, creating your first Angular project, understanding the folder structure, and running the Angular development server.

1. Install Node.js and Angular CLI

Before creating an Angular application, you must install Node.js and the Angular CLI.

Install Node.js

  1. Download Node.js from the official website.
  2. After installation, verify using:

node -v
npm -v

Install Angular CLI

The Angular CLI (Command Line Interface) is required to create and manage Angular projects.


npm install -g @angular/cli

This installs Angular CLI globally on your system.

2. Create Your First Angular App

Once the CLI is installed, you can create your first application.

Create a new project


ng new my-app

During project creation, Angular CLI will ask:

  1. Whether to add routing
  2. Which stylesheet format to use (CSS, SCSS, etc.)

After completion, a full Angular project structure is created.

3. Project Folder Structure

A basic Angular project contains the following main folders and files:

node_modules

Contains all installed dependencies.

src

This is the main application folder.

Inside src:

  1. app/ : Contains the root module and main components.
  2. assets/ : Contains images, JSON files, and static resources.
  3. environments/ : Development and production environment files.
  4. index.html : Main HTML file.
  5. main.ts : Starting point of the Angular application.
  6. styles.css : Global styles.

angular.json

Main configuration file for Angular build and project settings.

package.json

Lists all installed dependencies and npm scripts.

4. Angular Development Server

After creating the project, open the folder and run:


cd my-app
ng serve

The development server starts and compiles your application.

Access the application

Open your browser and go to:


http://localhost:4200/

This displays the default Angular welcome page.

Development Server Features

  1. Auto reload on file changes
  2. Real-time compilation
  3. Helpful error messages in the console