Skip to main content

Angular Installation

Introduction​

Angular is a powerful, feature-rich framework developed by Google for building dynamic single-page web applications. Before diving into Angular development, you need to set up your development environment correctly. This guide will walk you through the process of installing Angular and creating your first project, ensuring a smooth start to your Angular journey.

Prerequisites​

Before installing Angular, make sure you have the following prerequisites installed on your system:

  1. Node.js and npm: Angular requires Node.js version 16.14.0 or later, which includes npm (Node Package Manager).
  2. A code editor: Visual Studio Code, WebStorm, or any editor of your choice.
  3. Terminal or Command Prompt: For executing commands.

Checking Your Environment​

First, verify whether Node.js and npm are installed on your machine:

bash
node -v
npm -v

The output should show the installed versions:

v18.16.0
9.5.1

If these commands aren't recognized or show versions lower than required, you'll need to install or update Node.js.

Installing Node.js​

  1. Visit the official Node.js website
  2. Download the LTS (Long Term Support) version recommended for most users
  3. Follow the installation instructions for your operating system
  4. After installation, verify your Node.js and npm versions again using the commands above

Installing Angular CLI​

The Angular Command Line Interface (CLI) is an essential tool that helps you initialize, develop, scaffold, and maintain Angular applications. To install the Angular CLI globally on your system, run:

bash
npm install -g @angular/cli

The -g flag ensures the CLI is installed globally, making it accessible from any directory.

After installation, verify the Angular CLI version:

bash
ng version

You should see output similar to:

Angular CLI: 16.2.0
Node: 18.16.0
Package Manager: npm 9.5.1
OS: win32 x64

Creating Your First Angular Project​

Now that you have Angular CLI installed, let's create your first project:

bash
ng new my-first-angular-app

The CLI will prompt you with a few questions:

  1. Would you like to add Angular routing? - Choose 'Yes' for this example to include routing capabilities.
  2. Which stylesheet format would you like to use? - Select CSS (or another option if you prefer).

The CLI will then create a new directory with your project name and install all necessary dependencies. This might take a few minutes.

Once installation is complete, navigate to your project directory:

bash
cd my-first-angular-app

Running Your Angular Application​

To start the development server and run your application:

bash
ng serve

By default, this makes your application available at http://localhost:4200/. The CLI also provides the --open (or simply -o) flag to automatically open the application in your default browser:

bash
ng serve --open

You should see the default Angular application page, which confirms your installation was successful!

Project Structure Overview​

Let's briefly look at the key files and folders in your new Angular project:

  • src/app: Contains your application code
  • src/assets: Stores static assets like images
  • src/environments: Configuration for different environments
  • angular.json: Angular workspace configuration
  • package.json: Project dependencies and scripts
  • tsconfig.json: TypeScript compiler configuration

Customizing Your Application​

Let's make a small change to verify we can edit the application. Open src/app/app.component.ts and modify the title property:

typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My Awesome Angular App';
}

Save the file and check your browser. The application should automatically reload and display your new title.

Common Installation Issues and Solutions​

Permissions Errors​

If you encounter permission errors during installation:

For Windows:

  • Run command prompt or PowerShell as administrator

For macOS/Linux:

bash
sudo npm install -g @angular/cli

Node Version Incompatibility​

If you get errors about Node.js version:

  1. Install Node Version Manager (nvm)
  2. Install the compatible Node.js version
  3. Switch to that version before installing Angular

Slow Installation​

If installation is taking too long:

bash
npm install -g @angular/cli --no-optional

Real-World Application: Setting up an Angular Project for a Blog​

Let's create a more realistic project structure for a blog application:

bash
ng new angular-blog --routing --style=scss

After creating the project, we can generate some components:

bash
cd angular-blog
ng generate component components/header
ng generate component components/footer
ng generate component pages/home
ng generate component pages/blog-post
ng generate service services/blog

This creates a structured project with reusable components and services, which is closer to how real-world Angular applications are organized.

Summary​

In this guide, you've learned how to:

  1. Install Node.js and npm
  2. Install the Angular CLI
  3. Create a new Angular project
  4. Run your Angular application
  5. Understand the basic project structure
  6. Make simple modifications
  7. Set up a more realistic project structure

Setting up your Angular development environment correctly is crucial for smooth development. With Angular CLI, creating and managing Angular applications becomes much more straightforward.

Additional Resources​

Exercises​

  1. Try changing the styles in src/app/app.component.css to customize the appearance of your application.
  2. Generate a new component with ng generate component my-component and add it to your application.
  3. Explore the Angular CLI documentation and try some other commands like ng build or ng test.
  4. Create a new project using different options (e.g., without routing or with a different stylesheet format).

If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)