Setup Environment For Creating Angular 8 Application

In this article, we are going to set up the environment for creating Angular 8 applications and we will create our first Angular 8 application.

Environment Setup

 
Below are the tools that we need to develop an Angular application.
 

NodeJS

 
Node.js is designed to build scalable applications. As Angular application runs on top of Node so we need to install the NodeJS first. Let’s download and install Node JS from here. The current latest stable version is 10.16.3 which can be used to develop an Angular 8 application.
 
Once it is installed, go to the command prompt and check the status by executing this command -
 
node -v
 
It should return the version you have just installed. If it is showing a different version, then it’s better to uninstall and install it again.
 
Setup Environment For Creating Angular 8 Application
 
 

Node Package Manager

 
After installing Node, you need a node package manager for managing the client-side libraries. Let's check if npm is already installed, by running “npm -v” command. If it returns the version of npm, then you don’t need to install npm. Else, you need to install npm and for that, you can run the “npm install npm@latest -g” command. Now, run the version command again to make sure it is successfully installed.
 
As I have already installed npm, it is showing “updated 1 package”.
 
Setup Environment For Creating Angular 8 Application
 
Setup Environment For Creating Angular 8 Application
 

Angular CLI

 
Angular CLI is a command-line tool that is used to initialize, develop, scaffold, and maintain Angular applications. Angular CLI gives multiple commands to build an Angular application which speeds up the development.
 
You can install Angular CLI by running the npm command “npm install -g @angular/cli”, the current latest version of Angular is 8.3.5. Once it is installed, you should run “ng –version” command to check the installed version. The keyword “ng” is used to run the Angular CLI commands.
 
To develop Angular 8 apps, the required version of Angular CLI is 8.x.x
 
Setup Environment For Creating Angular 8 Application
 

IDE

 
I prefer Visual Studio Code over other editing tools because it is free and lightweight and many extensions are available to speed-up the development. So, let’s download and install the latest version of Visual Studio Code from here.
 
Setup Environment For Creating Angular 8 Application
 

Create First Angular 8 Application

 
To create an Angular application, we can use the CLI command. Open the command prompt and move to the directory where you want to create your application and run the following command
 
“ng new MyFirstAngular8App --route --routing --style=scss”
 
To create an Angular app with routing and style parameters.
 
OR
 
“ng new MyFirstAngular8App”
 
To create an Angular app using the wizard as below.
 
It will first ask to add routing so you can type “y” as we scaffold routing module and hit Enter.
 
Setup Environment For Creating Angular 8 Application
 
Then, it will ask for the stylesheet format. I prefer scss as it is an extended stylesheet and widely used. You can look into scss further on here.
 
Setup Environment For Creating Angular 8 Application
 
It will create an Angular application and download all the dependencies. Once it is done, it will show a message something like below possibly with some warnings that can be ignored for now, but it should not have any error.
 
Setup Environment For Creating Angular 8 Application
 
The application is now created. Let’s open Visual Studio Code and open the application folder. You can simply do it using command prompt by running the command “code .” in the application directory “MyFirstAngular8App”.
 
Setup Environment For Creating Angular 8 Application
 
You can change the localhost port by changing the baseUrl in the protractor.conf.js file. It is required if you want to run multiple applications and port 4200 is busy by another app.
 
Setup Environment For Creating Angular 8 Application
 
To run the application, open the Terminal window (CTRL+`) and run “ng serve”, you can also run this command in command prompt while in the application directory.
 
By default, your application is hosted on localhost:4200. So, open this URL in your browser.
 
Setup Environment For Creating Angular 8 Application
 
Open localhost:4200 in your browser. Below is the home page (appcomponent) created by Angular CLI.
 
Setup Environment For Creating Angular 8 Application
 

Conclusion

 
In this article we have learned how to setup Angular Environment specificaly for Angular8 and created our first application. In the next article we'll talk about Angular Application Architecture and Fundamentals.
 
Get Git Repository at here