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
- https://nodejs.org/en/
- https://cli.angular.io/
- https://github.com/angular/angular-cli/wiki/serve
Khaja MoizuddinPosted Oct 5, 2018, 10:35 AM
Nicely written Mangesh, for beginners it's easy to understand....
Ramnath BodkePosted Jan 15, 2018, 10:13 AM
Good article for beginner
Prashant PimpalePosted Nov 14, 2017, 10:30 PM
Have you worked on Angular Material... if yes Then need your help..ping me on [email protected]
Prashant PimpalePosted Nov 14, 2017, 10:28 PM
Good morning..Mangesh
Aniket NarvankarPosted Nov 14, 2017, 12:49 AM
Very good article.Keep posting and helping us
Vijay SinghPosted Nov 11, 2017, 5:07 AM
Good Artical @Mangeshdingh gaherwar
Maninder BhattiPosted Nov 10, 2017, 5:20 AM
Helpful article. thank you!