Angular 5 Basics And Quickstart With CLI

Why Angular CLI

Imagine what it would be to manually add the configuration files required to bootstrap an Angular 4 application. It is painful, right? For beginners, it might become tedious to declare all these files and manually configure all these files to bootstrap the app. It wouldn't be a good idea to set up the configuration things rather than focus on the framework and its usage. Even for the advanced developer, it might not be a great way to do all these things manually.

So, Angular CLI is the solution here.

What it offers

It offers a great way to organize the building blocks of the Angular development environment and also enables you to unit test the application followed by clubbing it with the web pack which bundles all the JavaScript and CSS dynamically and adds them to the main HTML file where our application gets loaded.

CLI stands for the Command Line Interface.

Let's see how we can install the Angular CLI on a machine and quick start our project.

Prerequisites for Angular CLI

Install Node.js and NPM

The first step to use Angular CLI is to install the Node.js and npm. Node.js uses Chrome V8 Engine to run the JavaScript on Servers and it also acts as the repository for various opensource packages which can be installed by using npm (NuGet Packet Manager).

To get the latest Node.js on the system, download Node.js by visiting following link.

“https://nodejs.org/en/”

Installing Angular CLI

Ok! We are done with the Node.js installation, now it is time to install the Angular CLI. Just open the command prompt (Try to run as admin because sometimes, the installation fails because of the privilege issues).

Use command >> npm install -g @angular/cli

Here, npm is installing the Angular CLI globally in the system.



Once the intsllation is done, now we are ready to create the new project by using Angular CLI.

Angular CLI Basic Commands 

ng new

ng new is the command used for creating a new applicatin. It creates the application that already works and follows the best practices.

ng generate

ng generate is used to create a new class, component, routes services, or Pipes by using this simple command -

 ng generate class/component/service/directive/enum/interface/module/pipe/ [name]

ng serve

ng serve is used to run start the server and run the application. There are various commands like ng e2e, ng lint, ng test, ng build, ng doc etc. but the above 3 commands are needed to start an application.

Creating the New Application

We use Ng New command to create the new application. The syntax for creating a new application in the given directory would be -

ng New [Application name]

There are various ways to create the application from the command prompt or from the integrated terminal we have within the Visual Studio Code. I will prefer the command prompt as sometimes VS Code hangs while executing the commands. So, our steps would be -

Open the Command Prompt, move to the directory where we want to create the application, and type the following command.

>> ng new MyFirstApp8Nov

In this ng New command, MyFirstApp8Nov is the project name that I have given to create the new application.

Note

When you hit the Ng New command, then after creating initial directories, the package installation takes some time depending on the internet speed of the machine. So have some patience because sometimes, it takes around 4- 5 minutes to create the project and complete the installation.

Now, we have our application ready; let's check the application from Visual Studio Code. In order to open the application, just open the folder in the VS Code which in my case is - D:\\MyFirstApp8Nov

When you open the folder, you will see various folders like node_modules which contains all the packages for the application, various configurations like package.json, tsconfig.json etc. The files are automatically added with the application creation.

Application creation was pretty simple, right?

So now, it is time to run the application. For that, we use the command ng serve as stated above. We have created the application and to run this, just follow the below steps -

>> Move to the Source code folder

When you hit enter, you will see that the compilation of the files is availble as the source here. Angular CLI uses the web pack as a Module bundler.



When we see the compiled app successfully, just browse the URL http://localhost:4201/ (In my case, it is 4201 but by default, it can be 4200 or any other port number; just check the first line where it shows the URL ). It will show the output as -

Our application is up and running.

Note

Sometimes, if the Port 4200 is used somewhere, then the ng serve command won't start the application. then, we use the commad

ng serve –port 4201

To sum up the steps

• Install the Node.js and npm
• Install the Angular CLI (npm install -g @angular/cli)
• Create the project using the CLI command (ng New [project name])
• Run the application using CLI command (ng serve)
• Create the new component /class using the CLI command (ng new class/component [name])

This is all for the Angular CLI an Quickstart the Angular project using the Angular CLI

References

1. https://nodejs.org/en/
2. https://cli.angular.io/
3. https://github.com/angular/angular-cli/wiki/serve