Getting Started With Angular 6 Using Angular CLI - Part One

Introduction
 
Today, we are going to learn the most popular Single Page Application creation framework, called AngularJS, using Angular CLI (Command Line Interface). We know that by using Angular, we can build modern applications such as web, mobile, or desktop in the real world. Previously, we learned about another famous single page application builder called Aurelia.
 
Prerequisites
  • Download and Install - NodeJS ( Angular requires Node.js version 8.x or 10.x. )
  • Download and Install - VS Code ( A best opensource editor for developing Angular Application, etc ).
  • Download and Install - Git ( Not mandatory but use for a best practice ).
Angular CLI Installation
 
We can install Angular Command Line Interface after the installation of "node.js" in our environment. This will help us to create the projects, generate application and library code, and perform such a variety of ongoing development tasks such as testing, bundling, and deployment in our application. So, this will reduce the time of development activities because the CLI registers and generates files automatically at the beginning stage. That is why we need a version control mechanism for the newly changed items in the application and it will identify in which files what types of changes are reflected. This is more helpful to the beginners in Angular CLI application development. We can install the Angular CLI globally by using the following command in our application.
  1. npm install -g @angular/cli  
Create a Project
 
Now, we are going to create a simple project repository in our environment. The repository I have created is in GitHub account and it is cloned in my environment (machine). The best practice of Angular CLI or any other application is by configuring a version control in our VS Code otherwise we blindly create and check-in the code in the project repository. No issues! We can continue without configuring a version control in our application.
 
Go to your repository or the place where you are planning to create a project set up. Open the command prompt and run the following command.
  1. ng new angular-app  
Eg : "ng new [ProjectName]" our project name is "angular-app"
 
Angular CLI created the "angular-app" in our repository.
 
Getting started with Angular 6 using Angular CLI
 
Install Angular Essential Extension
 
Click on Visual Studio Code Extension menu on the left sidebar, then search for "Angular Essential" (John Papa) in the search box. Once we install the Angular Essentials, it will install all other supporting packages in the application automatically. Also, It will generate different icons for all the folders, TS files, styles, and JSON etc.
 
Getting started with Angular 6 using Angular CLI 
 
Angular Build
 
We have generated a dummy application in our repository. The next step will be to build our application. For that, open a "Command Terminal" in Visual Studio Code.
  1. Click on Visual Studio "Terminal" menu from the top of the menu list.
  2. "Terminal" menu displays a list of options; just click "New Terminal ( Cntrl + Shift + ~ )".
There is one more short key for opening the "Terminal" in VS Code ( " Cntrl + ~ " ). We can see the following terminal displayed on the right side bottom of VS Code.
 
Getting started with Angular 6 using Angular CLI 
 
Now, we need to build our application and for that, we need to open the root directory of the application. When you open the Terminal in the VS code, it may display the repository path of our application. So, just change to application path in the following way.
 
Getting started with Angular 6 using Angular CLI 
 
The build artifacts will be stored in the dist/ directory folder in the application. Now run the Angular CLI build Command.
  1. ng build  
If you are getting the following error, this means you need to install "@angular-devkit/build-angular" dev dependency. This package was introduced in Angular 6.0.
 
Getting started with Angular 6 using Angular CLI 
 
The following command will help us to create devkit dependency in our application.
  1. npm install --save-dev @angular-devkit/build-angular  
If you are facing this same issue after the installation of dev kit, then you need to uninstall and install the Angular CLI.
 
App Component
 
Components are the basic UI building block of an Angular app. So here we can see there is an "app" component generated under the "src -> app" folder in "angular-app" application. If you are using Angular CLI, it will auto-generate all the files that are relevant to your basic application. For example, in the following screenshot, the app folder contain such auto-generated files as - css, spec, ts, and module.
 
Getting started with Angular 6 using Angular CLI 
 
Angular Serve
 
Now, the build has succeeded. Yes, our application is ready to serve. Please run any of the following commands (one is an alias or a short command) to open our application in a browser.
  1. ng serve --open  
  2. ng s -o  
Or, if we don’t want to open the application in a browser, then we can just run the following command and navigate to "http://localhost:4200/".
  1. ng serve  
Bundling the application
 
So, we can bundle our application using any of the following command and flag "–prod" bundle for production.
  1. ng build --prod  
  2. ng serve --prod  
For more options, click here.
 
Changing the default port number
 
Every application should navigate to "http://localhost:4200/" as default. So, if you are really thinking to open an application in a different port address, it is possible. Just run any of the following commands.
  1. ng s --port 3000 --open  
  2. ng s --port 3000 -o  
Output
 
As I mentioned earlier, the default port we have changed to "3000" instead of "4200".
 
Getting started with Angular 6 using Angular CLI 
Download
Reference
Summary
 
From this article, we have learned the basic configuration of Angular 6 using Angular CLI and a few basic CLI commands. I hope this article is useful for all the Angular CLI beginners. 


Similar Articles