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(The best open-source editor for developing Angular Applications, etc ).
• Download and Install: Git( Not mandatory but used for a best practice ).

Angular CLI Installation

We can install the 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 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 newly changed items in the application and it will identify in which files what types of changes are reflected. This is more helpful to beginners in Angular CLI application development. We can install the Angular CLI globally by using the following command in our application.

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 the GitHub account and it is cloned in my environment (machine). The best practice of Angular CLI or any other application is to configure 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 setup. Open the command prompt and run the following command.

ng new angular-app

Eg: "ng new [ProjectName]" our project name is "angular-app"

Angular CLI created the "angular-app" in our repository.

Install Angular Essential Extension

Click on the 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.

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. The "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.

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.

The build artifacts will be stored in the dist/ directory folder in the application. Now run the Angular CLI build Command.

ng build

If you are getting the following error, this means you need to install the "@angular-devkit/build-angular" dev dependency. This package was introduced in Angular 6.0.

The following command will help us to create devkit dependency in our application.

npm install --save-dev @angular-devkit/build-angular

If you are facing the same issue after the installation of the dev kit, then you need to uninstall and install the Angular CLI.

App Component

Components are the basic UI building blocks of an Angular app. So here we can see there is an "app" component generated under the "src -> app" folder in the "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 contains such auto-generated files as - CSS, spec, ts, and module.

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.

ng serve --open
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/".

ng serve

Bundling the application

So, we can bundle our application using any of the following commands and flag the "–prod" bundle for production.

ng build --prod
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 of opening an application in a different port address, it is possible. Just run any of the following commands.

ng s --port 3000 --open
ng s --port 3000 -o

Output

As I mentioned earlier, the default port we have changed to "3000" instead of "4200".

Download

• Source Code

Reference

• Tech Blog Content
• Angular Docs

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.