Ultimate Guide to Angular CLI

Angular CLI Introduction

Angular CLI is the Command Line Interface which is used to automate our development and its workflow. We can perform following tasks using Angular CLI:

• Creating an Angular application
• Serve the Angular application with LiveReload support.
• Doing Unit test in the application
• Runing end-to-end (E2E) tests in the application.
• build and deployment of the application on different environment.

Minimum Prerequisites

1.Node.js 6.9.0 or higher.

2. NPM 3.0.0 or higher

Angular CLI Installation

$ npm install -g @angular/cli

This command will install the ng command globally across the system and can be verified using:

$ ng version

which will display the version installed:

@angular/cli: 1.0.0
node: 6.10.0
os: darwin x64

Create the Angular Application using CLI

$ ng new my-app

The command results in production of following directories and project structure:

.
??? README.md
??? e2e
?   ??? app.e2e-spec.ts
?   ??? app.po.ts
?   ??? tsconfig.e2e.json
??? karma.conf.js
??? package.json
??? protractor.conf.js
??? src
?   ??? app
?   ?   ??? app.component.css
?   ?   ??? app.component.html
?   ?   ??? app.component.spec.ts
?   ?   ??? app.component.ts
?   ?   ??? app.module.ts
?   ??? assets
?   ??? environments
?   ?   ??? environment.prod.ts
?   ?   ??? environment.ts
?   ??? favicon.ico
?   ??? index.html
?   ??? main.ts
?   ??? polyfills.ts
?   ??? styles.css
?   ??? test.ts
?   ??? tsconfig.app.json
?   ??? tsconfig.spec.json
?   ??? typings.d.ts
??? tsconfig.json
??? tslint.json

$ ng generate --help can be used to see all theh available options of the locall installation of the Angular CLI.

Serving the Application

The app can be run by going into the project's root directory and using ther serve command of the angular CLI:

$ ng serve

This command will start the development server at default 4200 port. the output in the terminal can be viewed as:

** NG Live Development Server is running on http://localhost:4200 **
Hash: 09fb2ad840c1472e5885
Time: 6230ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 3.62 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.37 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

Navigating to http://localhost:4200/ will display a working angular quick start application:

Generate command:

The ng generate command is a vital command and can be used to add different features into the existing application:

• ng generate class my-new-class: adding a new class to the application
• ng generate component my-new-component: adding a new component to the application
• ng generate directive my-new-directive: adding a new directive to the application
• ng generate enum my-new-enum: adding an enum to the application
• ng generate module my-new-module: add a new module to the application
• ng generate pipe my-new-pipe: adding a new pipe to the application
• ng generate service my-new-service: adding a new service to the application
•  

Thanks