How to Install Angular 14 on AlmaLinux: A Comprehensive Guide

Angular, a widely-used TypeScript-based framework, is a go-to choice for building scalable and dynamic web applications. With the release of Angular 14, developers enjoy enhanced features such as typed forms, standalone components, and streamlined Angular CLI commands. If you’re using AlmaLinux, a robust and enterprise-grade Linux distribution, this guide will walk you through the process of installing and setting up Angular 14 step-by-step.

Table of Contents

1. What is Angular 14?
2. Prerequisites
3. Step 1: Update Your AlmaLinux System
4. Step 2: Install Node.js (LTS Version)
5. Step 3: Install Angular CLI
6. Step 4: Create a New Angular Project
7. Step 5: Serve and Test the Angular Application
8. Step 6: Configure Angular for Production
9. Conclusion

1. What is Angular 14?

Angular 14 is the latest iteration of Google’s Angular framework. It includes significant improvements like:

• Standalone Components: Simplifies module management by making components self-contained.
• Typed Reactive Forms: Adds strong typing to Angular forms, improving type safety and developer productivity.
• Optional Injectors in Embedded Views: Simplifies dependency injection for embedded views.
• Extended Developer Command Line Interface (CLI): Enhances the commands for generating components, services, and other resources.

By leveraging Angular 14, you can create efficient, maintainable, and future-proof applications.

2. Prerequisites

Before diving into the installation process, ensure you have:

1. A server or workstation running AlmaLinux.
2. Root or sudo access to install software and configure the system.
3. An active internet connection for downloading dependencies.
4. Familiarity with the command line and basic knowledge of web development.

3. Step 1: Update Your AlmaLinux System

Keeping your system updated ensures you have the latest security patches and software versions. Use the following commands to update AlmaLinux:

sudo dnf update -y
sudo dnf upgrade -y

After the update, reboot your system to apply changes:

sudo reboot

4. Step 2: Install Node.js (LTS Version)

Angular requires Node.js to run its development server and manage dependencies. For Angular 14, you’ll need Node.js version 16.x or higher.

Step 4.1: Add the NodeSource Repository

Install Node.js 16 (or later) from the official NodeSource repository:

curl -fsSL https://rpm.nodesource.com/setup_16.x | sudo bash -

Step 4.2: Install Node.js

Install Node.js along with npm (Node Package Manager):

sudo dnf install -y nodejs

Step 4.3: Verify Installation

After installation, verify the versions of Node.js and npm:

node -v

Expected output:

v16.x.x

npm -v

5. Step 3: Install Angular CLI

The Angular CLI (Command Line Interface) is a powerful tool that simplifies Angular project creation, management, and builds.

Step 5.1: Install Angular CLI

Install Angular CLI globally using npm:

sudo npm install -g @angular/cli

Step 5.2: Verify Angular CLI Installation

Check the installed version of Angular CLI to confirm it’s set up correctly:

ng version

Expected output:

Angular CLI: 14.x.x

6. Step 4: Create a New Angular Project

Once the Angular CLI is installed, you can create a new Angular project.

Step 6.1: Generate a New Angular Project

Run the following command to create a new project. Replace my-angular-app with your desired project name:

ng new my-angular-app

The CLI will prompt you to:

1. Choose whether to add Angular routing (type Yes or No based on your requirements).
2. Select a stylesheet format (e.g., CSS, SCSS, or LESS).

Step 6.2: Navigate to the Project Directory

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

cd my-angular-app

7. Step 5: Serve and Test the Angular Application

With the project set up, you can now serve it locally and test it.

Step 7.1: Start the Development Server

Run the following command to start the Angular development server:

ng serve

By default, the application will be available at http://localhost:4200/. If you’re running on a remote server, you may need to bind the server to your system’s IP address:

ng serve --host 0.0.0.0 --port 4200

Step 7.2: Access the Application

Open a web browser and navigate to:

http://<your-server-ip>:4200/

You should see the default Angular welcome page. This confirms that your Angular 14 project is working correctly.

8. Step 6: Configure Angular for Production

Before deploying your Angular application, it’s essential to build it for production.

Step 8.1: Build the Application

Use the following command to create a production-ready build of your Angular application:

ng build --configuration production

This command will generate optimized files in the dist/ directory.

Step 8.2: Deploy the Application

You can deploy the contents of the dist/ folder to a web server like Apache, Nginx, or a cloud platform.

Example: Deploying with Apache

1. Install Apache on AlmaLinux:

   sudo dnf install httpd -y
   sudo systemctl start httpd
   sudo systemctl enable httpd
   

2. Copy the built files to the Apache root directory:

   sudo cp -r dist/my-angular-app/* /var/www/html/
   

3. Adjust permissions:

   sudo chown -R apache:apache /var/www/html/
   

4. Restart Apache to serve the application:

   sudo systemctl restart httpd
   

Your Angular application should now be accessible via your server’s IP or domain.

9. Conclusion

By following this guide, you’ve successfully installed and set up Angular 14 on AlmaLinux. You’ve also created, served, and prepared a production-ready Angular application. With the powerful features of Angular 14 and the stability of AlmaLinux, you’re equipped to build robust and scalable web applications.

Whether you’re a beginner exploring Angular or an experienced developer, this setup provides a solid foundation for creating modern, dynamic applications. As you dive deeper into Angular, explore advanced topics such as state management with NgRx, lazy loading, and server-side rendering to enhance your projects.

Happy coding!