Setup Environment & Install Angular 19

by

Angular 19: Installation and Project Structure

Hello everyone! Welcome to a new post about Angular. This time, we’re diving into version 19 of this popular web development framework.

With each new version, the Angular team introduces improvements that enhance stability and performance. Angular 19 is no exception, bringing exciting updates like the Resource API and the ability to declare template variables directly in HTML.

In this post, we’ll focus on the installation and basic setup of an Angular 19 project.

Step-by-Step Installation

1. Install Node.js

First, make sure Node.js is installed on your system. Node.js is required to run Angular CLI and manage dependencies.

Download Node.js: https://nodejs.org/

Verify Installation: Once installed, open a terminal and run:

# installs nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
# download and install Node.js (you may need to restart the terminal)
nvm install 22
# verifies the right Node.js version is in the environment
node -v # should print `v22.12.0`
# verifies the right npm version is in the environment
npm -v # should print `10.9.0`

This command checks if Node Package Manager (npm), which comes with Node.js, is installed correctly.

2. Install Angular CLI

The Angular Command Line Interface (CLI) simplifies the creation and management of Angular projects.

Install CLI: Run the following command in your terminal:


$ npm install -g @angular/cli
# Installs the Angular CLI globally

Learn More About Angular CLI: https://angular.io/cli

3. Create Your Angular Project

With Angular CLI installed, you can now create a new project.

Command to Create a Project:

$ ng new project-name
# Creates a new Angular project

Setup Options:

Choose between CSS or SCSS for styles.

Decide if you want server-side rendering (SSR).

Server-Side Rendering (SSR) in Angular is …

SSR is a technique that renders Angular application pages on the server before sending them to the user’s browser. Instead of generating content entirely on the client side (browser), the server delivers a pre-rendered HTML page containing the initial content.

Use Case:
SSR is ideal for applications that need better SEO and faster initial load times, such as blogs, online stores, or sites relying on organic traffic. By delivering server-rendered content, search engines can index pages more effectively, and users experience reduced initial load times.

4. Understanding Project Structure

Once your project is created, let’s explore its key files and folders:

src/app/app.component.*: The main component of your application. It contains the HTML, TypeScript, and CSS for the root component.

package.json: Contains the list of dependencies and their versions. Dependencies are installed via npm and stored in the node_modules folder.

angular.json: The main configuration file of your project. It defines routes, global styles, and other project settings.

src/index.html: The single HTML file of your Single Page Application (SPA). Angular renders all content within this file.

src/main.ts: The entry point of your Angular application. It configures the root module and starts the bootstrapping process.