Local Environment Setup in Angular

Setting up a local environment for Angular development is the first step to building powerful, scalable web applications. This guide will walk you through the entire process, from installing the necessary tools to creating and running your first Angular project.

Prerequisites

• Node.js
• npm

Steps to Setup Local Environment in Angular

Step 1: Install Angular CLI

The Angular Command Line Interface (CLI) is a powerful tool for initializing, developing, and maintaining Angular applications. To install Angular CLI globally on your system, run the following command in your terminal:

npm install -g @angular/cli

Step 2: Create a New Angular Project

Once the Angular CLI is installed, you can create a new Angular project. Navigate to the directory where you want to create your project, then run:

ng new gfg-angular

During the project setup, the CLI will prompt you to choose various configuration options, such as adding Angular routing and selecting a stylesheet format (CSS, SCSS, etc.). Choose the options that suit your project needs.

Step 3: Navigate to Your Project Directory

After the project is created, navigate into the project directory:

cd gfg-angular

Folder Structure:

Dependencies:

"dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  }

Step 4: Serve the Application

To serve your application locally and start the development server, run:

ng serve

By default, the Angular development server runs on http://localhost:4200/. Open your browser and navigate to this URL to see your new Angular application in action.

Step 5: Edit Your First Angular Component

The Angular CLI generates a default application structure with a root module and a root component. Let's edit the root component to display a custom message. Open src/app/app.component.html and replace its contents with:

<!--app.component.html-->

<h1>Welcome to My Angular App!</h1>
<p>This is your first Angular application setup.</p>

Save the file. The development server automatically reloads, and you should see your changes reflected in the browser.

Step 6: Install Additional Dependencies

As you develop your application, you may need to install additional libraries and dependencies. For example, to install Angular Material, run:

ng add @angular/material

Step 7: Building the Application for Production

When your application is ready for deployment, you need to build it for production. Run the following command:

ng build --prod

This command compiles your application into an optimized bundle, stored in the dist/ directory. You can then deploy this directory to your web server.

Output: