Angular CLI

The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and

The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications. You can use the tool directly in a command shell, or indirectly through an interactive UI such as Visual Studio Code.

Command Line Interface (CLI) can be used to create our Angular JS application. It also helps in creating a unit and end-to-end tests for the application.

The official site for Angular CLI is here

Installing Angular CLI

Major versions of Angular CLI follow the supported major version of Angular, but minor versions can be released separately.

First you need to install NPM node package manager here is the link of nmp. After installing nmp you can open console to install angular cli with the help of below command.

npm install -g @angular/cli

 You can check angular cli is installed or not with the help of this command

angular --version

WorkSpace and project

The ng new command creates an Angular workspace folder and generates a new app skeleton. A workspace can contain multiple apps and libraries. The initial app created by the ng new command is at the top level of the workspace. When you generate an additional app or library in a workspace, it goes into a projects/ subfolder.

A newly generated app contains the source files for a root module, with a root component and template. Each app has a src folder that contains the logic, data, and assets.

You can edit the generated files directly, or add to and modify them using CLI commands. Use the ng generate command to add new files for additional components and services, and code for new pipes, directives, and so on. Commands such as add and generate, which create or operate on apps and libraries, must be executed from within a workspace or project folder.

Angular JS project can be created using the following command.

ng new Project_name

Project_name − This is the name of the project which needs to be created.

Example

Lets creating a new project demo using angular cli

ng new demo

This command create a new angular project demo and also installed necessary initial npm package.

Workspace and project configuration

A single workspace configuration file, angular.json, is created at the top level of the workspace. This is where you can set per-project defaults for CLI command options, and specify configurations to use when the CLI builds a project for different targets.

The ng config command lets you set and retrieve configuration values from the command line, or you can edit the angular.json fiile directly. Note that option names in the configuration file must use camelCase, while option names supplied to commands can use either camelCase or dash-case.

Running the project

To run the project, you need to issue the following command

ng server

This command build the project and run the project.

The default port number for the running application is 4200. You can browse to the port and see the application running.

Command Overview

Command

Alias

                                 Description

add

 

Adds support for an external library to your project.

build

b

Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.

config

 

Retrieves or sets Angular configuration values in the angular.json file for the workspace.

doc

d

Opens the official Angular documentation (angular.io) in a browser, and searches for a given keyword.

e2e

e

Builds and serves an Angular app, then runs end-to-end tests using Protractor.

generate

g

Generates and/or modifies files based on a schematic.

help

 

Lists available commands and their short descriptions.

lint

l

Runs linting tools on Angular app code in a given project folder.

new

n

Creates a new workspace and an initial Angular app.

run

 

Runs an Architect target with an optional custom builder configuration defined in your project.

serve

s

Builds and serves your app, rebuilding on file changes.

test

t

Runs unit tests in a project.

update

 

Updates your application and its dependencies. See https://update.angular.io/

version

v

Outputs Angular CLI version.

xi18n

 

Extracts i18n messages from source code.

Comments (1) -

Add comment

CommentList

The file '/Custom/Widgets/ScriptInjection/widget.cshtml' does not exist.