How to Install and Setup Angular 7 on Ubuntu 18.04.1

Image is loading ...

Angular is a JavaScript opensource framework which helps in developing single page web applications suitable for web/mobile/desktop. Angular supports the use of TypeScript instead of JavaScript in your project if you are familiar with it.

It is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.

The current stable version of Angular is 7.0.1 and we are going to install it on Ubuntu 18.04.1 LTS Bionic Beaver.

1. INSTALL NODEJS

Since Angular is a JavaScript framework, it requires to have Nodejs(A JavaScript runtime) installed. 10.x is the current stable version of Node. Installation of Node.js can be done using the below command.

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install -y nodejs

2. INSTALL NPM

Now we need NPM(Node Package Manager) and it will be installed with the Nodejs installation itself. However, we can install the latest version for npm using the below command.

sudo npm install [email protected] -g

3.INSTALL ANGULAR CLI

Angular CLI helps us to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

It can be simply installed using npm.

npm install -g @angular/cli

4. CREATE A NEW ANGULAR PROJECT

Now we need to set up a workspace for Angular projects in our system and create a new app.

ng new awesome-project

5. CHOOSING THE CODE EDITOR

You can choose your own favorite code editor for editing your project. But in my case, I choose the Visual studio Code(VS code). Using the below link, you can download VS code for Ubuntu and install.

https://code.visualstudio.com

6. DIRECTING TO YOUR PROJECT FOLDER AND EDITING

Open your new project on VS code using the below command.

cd awesome-project
code .

7. RUNNING YOUR APPLICATION

The app you created can be run using the command below.

ng serve --open

This opens up a new tab on your browser with the URL below.

http://localhost:4200

You May Also Like

About the Author: Syamlal CM

Hi, I'm Syamlal, the co-founder of Redmonark. I'm a developer, writer and also have a little bit of experience in graphic designing.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.