Setup Environment For Creating 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.

 

 

 

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

 

 

 

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

 

 

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.

 

 

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.

 

 

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.

 

 

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.

 

 

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

 

 

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.

 

 

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.

 

 

Open localhost:4200 in your browser. Below is the home page (appcomponent) created by Angular CLI.

 

 

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