How To Install Angular on Debian 12

In this tutorial, we will show you how to install Angular on Debian 12. Angular, the powerful web application framework maintained by Google, has become the cornerstone of modern web development. Coupled with Node.js, a JavaScript runtime for server-side applications, it opens the door to creating dynamic web applications.

This article assumes you have at least basic knowledge of Linux, know how to use the shell, and most importantly, you host your site on your own VPS. The installation is quite simple and assumes you are running in the root account, if not you may need to add ‘sudo‘ to the commands to get root privileges. I will show you the step-by-step installation of Angular on a Debian 12 (Bookworm).

Prerequisites

• A server running one of the following operating systems: Debian 12 (Bookworm).
• It’s recommended that you use a fresh OS install to prevent any potential issues.
• SSH access to the server (or just open Terminal if you’re on a desktop).
• Make sure your Debian 12 system is connected to the internet. An active connection is essential for downloading the required packages and updates during the installation.
• A non-root sudo user or access to the root user. We recommend acting as a non-root sudo user, however, as you can harm your system if you’re not careful when acting as the root.

Install Angular on Debian 12 Bookworm

Step 1. Before we install any software, it’s important to make sure your system is up to date by running the following apt commands in the terminal:

sudo apt update
sudo apt upgrade

This command will refresh the repository, allowing you to install the latest versions of software packages.

Step 2. Installing Node.Js.

Node.js is crucial for running Angular applications. To install it on Debian 12, follow these steps:

sudo apt install nodejs npm

To verify that Node.js and npm are correctly installed, run the following commands:

node -v
npm -v

These commands should display the installed Node.js and npm versions.

Step 3. Installing Angular on Debian 12.

The Angular Command Line Interface (CLI) is a powerful tool that simplifies Angular development. To install it globally on your system, follow these steps:

npm install -g @angular/cli

This command will download and install Angular CLI.

To ensure that Angular CLI is successfully installed, run:

ng --version

Step 4. Creating a New Angular Project.

With Angular CLI installed, you’re now ready to create your first Angular project:

ng new my-angular-app

You’ll be prompted to configure various project settings. Follow the prompts and choose options that best suit your needs.

With your Angular project created, it’s time to familiarize yourself with its structure and run the development server.

Step 5. Angular Project Structure.

Understanding the structure of an Angular project is vital as it forms the foundation of your development work:

• src: This directory contains your application’s source code. It’s where you’ll spend most of your development time.
• angular.json: This configuration file is used by Angular CLI to manage your project.
• package.json: Lists your project’s dependencies, including Angular libraries and other packages.
• app: Within this directory, you’ll write the core of your application’s code.

Step 6. Running the Development Server.

Now that you have your Angular project set up, it’s time to run the development server. Open your terminal and navigate to your project folder. Replace ‘my-angular-app’ with the name of your project:

cd my-angular-app

To serve your Angular application during development, run the following command:

ng serve --open

The --open flag automatically opens your application in a web browser. As you make changes to your code, the development server will detect them and provide live updates in the browser. This instant feedback streamlines the development process and helps you quickly spot and fix issues.

Congratulations! You have successfully installed Angular. Thanks for using this tutorial to install the latest version of Angular on Debian 12 Bookworm. For additional help or useful information, we recommend you check the official Angular website.