In this blog, we are going to set up a project in Angular 7 using Angular CLI. This blog is written for those who are new to Angular and want to learn Angular 7 step by step.
For setting up a project using Angular CLI, please follow the below steps.
STEP 1 - Prerequisites
- Before setting up your project, first, check your environment and add node.js & Node Package Manager.
- For installing node.js, use the URL - https://nodejs.org/en/download
- If node.js is already installed on your system, just check the version of node.js to ensure it is 8.x or 10.x
- You can check for the versions of node and npm using the following commands respectively -
node -v
npm -v
- For example, you can refer to the below snapshot.
STEP 2 - Set up an Angular project using Angular CLI
- Using Angular CLI, we can create a boilerplate project with all the needed packages and library code including testing, deployment, and building the project.
STEP (A) - Setting up angular/cli in our system environment
- For the installation using npm, just go and open the terminal and run the below command.
npm install -g @angular-cli : : '-g' means we are installing angular-cli globally for our system.
- For example, you can refer to the below snapshot.
![]()
You can see the version of Angular CLI after completion of Angular CLI installation.
NOTE
If you want to see the version of Angular CLI, Node, OS, Angular, and some of the related packages in the same window, then you need to go to the terminal and run the following command -
ng version
Given below is the snapshot of the output after executing this command.
STEP (B) - Set up the application in your directory
- For installation using ng, just go to and open the terminal and run the below command.
ng new you-application-name
- Refer to the below snapshot.
STEP (C) - Start the Application
- Go to your directory where you installed you project (In my case, the application name is 'FirstAngularApp')
- Run the below command to start the project.
ng serve -o
- Application will open in the browser at the default port : 4200 and the application URL will be something like -http://localhost:4200/
- For example, you can refer to the below snapshot.
NOTE
Sometimes, you will face the following issue after installation of Angular/cli.
For fixing this, go to the environment variable under PATH and add the below line
(C:\Users\qnnq3z\AppData\Roaming\npm) or refer to the URL :https://github.com/angular/angular-cli/issues/1183
I hope this blog will be fruitful for everyone. Thanks for reading.
Happy learning :)