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
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
To get the latest Node.js on the system, download Node.js by visiting following link.
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
Angular CLI Basic Commands
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 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 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 –
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.
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
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.
Sometimes, if the Port 4200 is used somewhere, then the ng serve command won’t start the application. then, we use the commad
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