Advertisements

Getting Started With Angular 6 Using Angular CLI – Part Two


Introduction

In this article we are going to learn the basic development commands in Angular CLI ( Command Line Interface ). So before reading this article, you must read our previous article Angular – Part One for more knowledge.

Angular CLI Version

We know recently Angular 7 is released but still we are using Angular 6 !  Yes, we have started the application before the release of Angular 7, may be upcoming years we can expect more number of updates from Angular Team. Using any of the following command we can identify the current Angular CLI version in the application.

ng --version
ng -v

The following output we can see the current Angular CLI version in the application.

Run the following command to identify the global version of Angular CLI.

npm list -global --depth 0

We realise that we are using the lower version of Angular CLI comparing to the global version. Before migrating to the higher version of Angular CLI,we need to understand the necessary updates.

Component

Components are the basic UI building block of an Angular application. We already created an angular basic application in our previous article and by default it contains  an app component and it’s respective files. So now we are going to create a component inside the application using any of the the following command. “customer” is our component name.

ng generate component customer
ng g c customer

Component is created successfully !! The customer component created inside the “app” folder.

Then how will you know which are the places we need to register the current generated component ? This is why we integrate a version control like “Git” in the application otherwise people blindly create the application without knowing anything. Then we will know exactly which are the places we need to register the component in the application like the following way.

Dry Run

If you are new to the Angular CLI and planning to create a component,module,class,etc in the application. Then the first time you will have some confusion for what name will give where this file will be created. For that we can use “dry run” command in Angular CLI, this command will stop the CLI from making any changes to the application or only display which are the files are going to create in the file system. We can use any of the following command to verify the dry run command.

ng generate component customer --dryRun
ng g c s -d

In the following screen shot at the end of the result it will mention the dry run “Note”.

Module

Module is a mechanism to group the components, pipes, services and directives that are related, in such a way that we can create an application. To define a module then we have to use the decorator “NgModule” in the typescript file for the following way.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CustomerComponent } from './customer/customer.component';

@NgModule({
  declarations: [
    AppComponent,
    CustomerComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

We can use any of  the following command to create a new module in the application.

ng generate module customer
ng g m customer

Class

Using any of the following command,we can create a class in the application.

ng generate class customer
ng g cl customer

In the above command we can see “cl” as the alias of class, but why they are not using “c”for class, because it is considered as “component”. Now the class will create under the “app” folder and but we include this as in the customer folder or any other folder. Then add the folder name at the front of the class name with slash “customer/”. Because we are planning to add the class inside the customer folder that is why we add slash after the folder.

ng generate class customer/customer

Interface

We are going to create a major contract in the application called as interface. We can run any of the following command to create an interface in the application.

ng generate interface customer
ng g i customer

Enum

We can run any of the following command to create an Enum in the application.

ng generate enum customer
ng g e customer

Inline Template and Style

As we know when we running the Angular component command it automatically generating all the respective files for the component. So how we can add separate Inline template or Inline Style or Css ? So run the following command to achieve both inline and style in the component.

Inline Template Command :

The following command will create a inline template instead of creating a separate html file in the system.

ng generate component employee --inline-template
ng g c employee -t

We can see that the typescript file  created an inline template instead of giving reference of the html file.

Inline Style Command :

The following command will create a inline style option instead of creating a separate css file in the system.

ng generate component student --inline-style
ng g c student -s

In the following typescript file, we can see it put as blank in the style reference area instead of referring the style css.

Download :

Reference

Summary

From this article we have learned the basic command of  Angular CLI. I hope this article is useful for all the Angular CLI beginners.

Advertisements

Getting started with Angular 6 using Angular CLI – Part 1


Introduction

Today we are going to learn most popular Single Page Application called as Angular Js using Angular CLI ( Command Line Interface ). We know by using Angular we can build modern applications such as web, mobile, or desktop in the real world. Previously we learnt about another famous single page application called as Aurelia.

Prerequisites

  • Download and Install : Node.Js ( 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 you to create projects, generate application and library code, and perform such variety of ongoing development tasks such as testing, bundling, and deployment in our application. So this will reduce the time of development activities because of command line Interface register and generate files automatically at the beginning stage.  So that is why we need a version control for newly changed item in the application and it will identify  in which files what types of changes are reflected. This is more helpful for the beginners in   Angular CLI application development. Now 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 in Github account and it is been cloned  in my environment(machine). The best practice of Angular CLI or any other application is configuring a version control in our VS Code otherwise we blindly create and check-in the code in project repository. No issues we can continue without configuring a version control in our application.

Go to our repository or  the place where we 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 a “angular-app”

Angular CLI created “angular-app” in our repository.

Install Angular Essential Extension

Click on Visual Studio Code Extension menu in left side bar then search “Angular Essential”  (john papa) in the search box. Once we install Angular Essential,  it will install all other supporting packages in the application automatically. Also It will generate a different icons for all the folders,ts files,style,json,etc.

Angular Build

We are 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 “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 for that we need to open root directory of the application. May be when you open the Terminal in the VS code it will display the repository path of our application. So just change to application path by 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 then that means we need to install “@angular-devkit/build-angular” dev dependency. This package is newly 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 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 a “app” component generated under the “src -> app” folder in “angular-app” application. If you are using Angular CLI then it will auto generate all the files that are relevant for your basic application. For example in the following screen shot app folder contain such auto generated files are css,spec,ts and module.

Angular Serve

Now build is succeeded, Yes our application is ready to serve. Please run any of the following command ( one is 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 application in a browser then 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 command and flag “–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 to open an application in a different port address then it is possible. Just run any of the following command.

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 :

Reference

Summary

From this article we have learned the basic configuration of Angular 6 using Angular CLI and few basic CLI commands. I hope this article is useful for all the Angular CLI beginners.

%d bloggers like this: