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.
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.
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!