Learn how to Install Angular on Fedora in a few simple steps

Learn how to Install Angular on Fedora in a few simple steps.

Introduction

Angular is a powerful, free, and open-source web application framework created by Google. It is designed to create high-performing and scalable single-page applications for both mobile and desktop devices. It is highly customizable and can be easily integrated with other libraries. Angular is built with TypeScript and provides developers with a set of tools to quickly set up a maintainable and scalable application. In this post, we will guide you on how to install Angular on Fedora Linux.

Requirements

The following is a list of items needed to complete the installation successfully:
1) Fedora 38 or any newer version
2) An SSH client such as Putty or the Terminal app for macOS
3) A computer with 4GB RAM, a dual core processor and 25 GB of free disk space
4) Cloud deployment: A domain name with an A record pointing to the IP address of the Fedora server
5) A stable internet connection

Overview

The following is an overview of the steps covered in this tutorial:
1) Download and install NodeJS
2) Install AngularCLI
3) Create an angular application
4) Access the angular application
5) Deploy the angular application

Step 1: Download and install NodeJS

To begin with, you need to install Node.js on your system. Follow the below steps to install the latest stable version of Node.js.

Step 1: Install all the required dependencies using the following commands:

dnf update -y
dnf install -y gcc-c++ make

Step 2: Add the Node source repo with the following command:

curl -sL https://rpm.nodesource.com/setup_18.x | bash -

Step 3: Install Node.js with the following command:

dnf install nodejs git -y

Finally, you can verify the Node.js version with the following command:

node -v

If the installation is successful, the output should display the version of Node.js, for example:

v18.19.0

Step 2: Download and install AngularCLI

In order to work with Angular, you will need to install Angular CLI. This utility provides a command line interface to initialize, develop, and maintain Angular applications. To install Angular CLI, you can use the NPM command and type the following command:

npm install -g @angular/cli

Once you have installed Angular, you can verify its version using the following command:

ng version

This will output the following result:

Global setting: enabled
Local setting: No local workspace configuration file.
Effective status: enabled

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 16.1.4
Node: 18.11.0
Package Manager: npm 8.19.2
OS: linux x64

Step 3: Create an angular application

To create an Angular application, you can use the following command:

ng new application

Once the application is created, navigate inside it and start it using ‘cd application` followed by

ng serve --host 0.0.0.0 --port 8080

If everything is working properly, you should see the following output:

✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   2.28 MB | 
polyfills.js          | polyfills     | 333.16 kB | 
styles.css, styles.js | styles        | 230.46 kB | 
main.js               | main          |  48.10 kB | 
runtime.js            | runtime       |   6.52 kB | 

                      | Initial Total |   2.89 MB

Angular Live Development Server is listening on 0.0.0.0:8080, open your browser on http://localhost:8080/ 

✔ Compiled successfully.

This means that your Angular application has been successfully created and compiled.

Step 4: Access the angular application

Once you start your Angular application, it will listen on port 8080 and can be accessed using the URL http://your-server-ip:8080. You will see a screen similar to the one below.

Step 5: Deploy the angular application

To deploy your Angular application for production, you can use the:

ng build

command. Once executed, you will see a confirmation message indicating that the browser application bundle has been generated, assets have been copied, and HTML index has been generated. The command will generate a ‘dist/’ directory in your project folder with the compiled Angular application. You can verify the directory’s contents using the following command:

ls dist/angular-app/

The output of the command will show all the application files. you can use to keep track of your project’s version history.

Conclusion

In conclusion, this tutorial has guided you through the process of installing Angular on Fedora Linux. You’ve learned about the prerequisites, gained an understanding of the overall steps involved, and finally, installed and accessed a sample Angular application. With the ng build command, you are now equipped to deploy your developed Angular applications for production use. We hope this comprehensive guide has empowered you to take advantage of Angular’s capabilities in your Fedora development environment.