How to start an Angular project

Today we are going to talk about How to start an Angular project. First of all, I would like to give a small idea of Angular. Angular is an open-source web application framework based on TypeScript. And powered by Google’s Angular Team. You can simply develop web applications using Angular.

If you are good with HTML, CSS, and JavaScript it is very useful here. And also it’s very useful if you know about TypeScript but if you have no idea, don’t worry we hope to explain everything clearly. Let’s start an Angular project step by step. Firstly, We have to install Node.js and npm package manager to install Angular.

Step 1: Download and Install Node.js

First of all, CLICK HERE to download Node.js. After you clicked, you can see a page like below. Then download the LTS version related to your Operating System. I am using Windows 10. Therefore I click on the Windows Installer to download Node.js.

How to start an Angular project Figure 1
Figure 1

After that, double click on the setup file and install it. Then open the Command Prompt and type node -v to verify the successful installation. If the installation is successful you can get output like below.

Figure 2

When we install Node.js, the npm package manager is already installed by default. Open the Command Prompt and type npm -v to verify the successful installation. If the installation is successful you can get output like below.

Step 2: Install the Angular CLI

Now we have to install Angular CLI using npm package manager. Open the Command Prompt and type below command and run.

npm install -g @angular/cli
Step 3: Build and Run the new application

After Successfully installation run the below code to build new Angular project.

ng new myApp (Your project Name)

Then go to the project folder using Command Prompt like below.

cd myApp

Now type “ng serve –open” to run your project. “ng serve” command launch your server. And “–open” command automatically open your web browser to http://localhost:4200/

ng serve --open

If your project successfully build, You can see page like below.

During the installation of Angular CLI or when building a new project. If you got an error or unsuccessful installation alert. Use the below command before reinstall.

npm cache clean --force 

I think now you have a clear idea to start an Angular project. If you have any problem with this lesson comment on it. Let’s meet in the next lesson. And you can follow our Web Design Tutorial HERE.

Happy Coding!

How to Android USB Debugging – is it Safe?

Nirodha Wickramarathna

Nirodha Wickramarathna is a dynamic full-stack software engineer, adept at crafting innovative digital solutions. With expertise in both front-end and back-end technologies, Nirodha brings a holistic approach to software development. Passionate about staying ahead in the tech world, Nirodha shares insights, coding tips, and experiences on this blog. Join the journey of coding excellence with Nirodha!

Leave a Reply

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

Verified by MonsterInsights