How to Clone and Run an Angular App on Your Machine

Angular is a robust JavaScript framework for building single-page applications. Google developed the software and maintains it alongside worldwide contributors.

Like React, you can use Angular to create a variety of front-end applications, including web, mobile, and desktop systems. Some industries prefer Angular because it’s comprehensive and stable.

Let’s learn more about Angular by cloning a project from GitHub and running it locally.

Prerequisites for Cloning

Unlike other frameworks, cloning and running an Angular application is straightforward. You will be cloning a GitHub project. Before you begin, ensure you meet the following requirements:

1. Install Node Package Manager

Node Package Manager (npm) is a software repository for JavaScript packages. npm has a CLI (Command Line Interface) that performs various tasks. You can use the CLI to download, install, and deploy software.

When you install Node.js, it comes with an npm package. To check your Node.js and npm package versions, run the following on the terminal:

To check the version of Node.js installed, print the version with the following command:

node 

You can check the version of npm using the same option:

npm 

2. Install Angular CLI

You can use the Angular CLI to perform various development tasks. The tasks include generating applications, testing, and deploying. To install the Angular CLI, run the following command:

$ npm install -g @angular/cli

To check the Angular CLI version, run the command:

$ ng version

3. Find a Project on GitHub

You will clone the Giphy-Replica project from GitHub:

Navigate to the green button labeled Code. Click on it to reveal a dropdown list. Copy either the HTTP or SSH link. Either of these two will do.

4. Clone the Project Locally

First, create a folder and name it Angular-Clone. Remember to go to the folder with the following command:

cd Angular-Clone

Then, run the git clone command to copy the project to your folder.

git clone https:

Next, check the Angular-Clone folder to see if the clone Giphy-Replica is inside. Run ls to display the folder’s contents:

ls

Navigate to the folder:

cd Giphy-Replica

At this point, you can inspect the project files in a code editor of your choice or view them via the GitHub web interface.

5. Install npm Packages

You need to install all packages and dependencies from the cloned project to run it. To install the packages, run:

npm install

If you encounter any vulnerability reports, fix them with:

npm audit fix

6. Open the Project in a Browser

Now you have all requirements to run the project, you can run it and open it in a browser. Start by building and serving the project:

ng serve

Then open http://localhost:4200/ in a browser to view the project.

You can use the Angular CLI automatically open the project in a browser:

$ ng serve -o

This command builds the app, launches the server, and watches the files for updates.

In your browser, you should see the Giphy-Replica website:

Why Clone an Angular Project?

Instead of starting a project from scratch, you can clone one from GitHub. Cloning an open-source project and modifying it for your own use saves time over starting a project from scratch. You can also contribute any useful changes back to the upstream project if relevant.

Voted as the fourth most popular front-end framework in 2021, Angular continues to amaze with each release. It comes with great packages that support the development of single-page applications. Use this excellent framework to build world-class applications.