How to create an angular app using Angular CLI in 2 minutes?

Get support on Angular & Typescript related technology.
Post Reply
admin
Site Admin
Posts: 44

How to create an angular app using Angular CLI in 2 minutes?

Post by admin » Thu Aug 22, 2019 3:00 pm

What Is Angular CLI?
Angular CLI is a command-line interface (CLI) to automate your development workflow.
It allows you to:
create a new Angular application
run a development server with LiveReload support to preview your application during development
add features to your existing Angular application
run your application’s unit tests
run your application’s end-to-end (E2E) tests
build your application for deployment to production.

Before we have a look at each of the above in detail, let’s first see how you can install Angular CLI.

Prerequisites
Before you can use Angular CLI, you must have Node.js 6.9.0 and npm 3.0.0 or higher installed on your system.

You can download the latest version of Node.js for your operating system and consult the latest installation instructions on the official Node.js website.

If you already have Node.js and npm installed, you can verify their version by running:

Code: Select all

$ node -v 
$ npm -v
Once you have Node.js installed, you can use the npm command to install TypeScript:

Code: Select all

$ npm install -g typescript@latest

Now that you have Node.js and TypeScript installed, you can install Angular CLI.


To install Angular CLI, run:

Code: Select all

$ npm install -g @angular/cli
This will install the ng command globally on your system.

To verify whether your installation completed successfully, you can run this:

Code: Select all

$ ng version
This displays the version you have installed.


Now that you have Angular CLI installed, let’s use it to create a new application.

Creating a New Angular Application
Assuming you haven’t created a directory yet, let’s use ng new to create a new project:

Code: Select all

$ ng new my-app

Running Your Application
To preview your new application in your browser, navigate to its directory:

Code: Select all

$ cd my-app
and run:

Code: Select all

$ ng serve
to start the built-in development server on port 4200:

Open http://localhost:4200 in your browser.

Adding Features to Your Angular Application
You can use the ng generate command to add features to your existing application:

ng generate class my-new-class: add a class to your application
ng generate component my-new-component: add a component to your application
ng generate directive my-new-directive: add a directive to your application
ng generate enum my-new-enum: add an enum to your application
ng generate module my-new-module: add a module to your application
ng generate pipe my-new-pipe: add a pipe to your application
ng generate service my-new-service: add a service to your application
The generate command and the different sub-commands also have shortcut notations, so the following commands are similar:
ng g cl my-new-class: add a class to your application
ng g c my-new-component: add a component to your application
ng g d my-new-directive: add a directive to your application
ng g e my-new-enum: add an enum to your application
ng g m my-new-module: add a module to your application
ng g p my-new-pipe: add a pipe to your application
ng g s my-new-service: add a service to your application.
Each of the different sub-commands performs a different task and offers different options and parameters.

Post Reply