CLI Overview

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 Ul such as Angular Console.

Installing Angular CLI

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

Install the CLI using the npm package manager

npm install -g @angular/cli

For details about changes between versions, and information about updating from previous releases, see the Releases tab on GitHub:

https://github.com/angular/angular-cli/releases

Basic work flow

Invoke the tool on the command line  through the ng executable. Online Help is  available on the command line. Enter the following to list commands or options for a given command such as generate with a short description

ng help

ng generate --help

to create, build, and serve a new, basic

Angular project on a development serve,

workspace use the following commands:

ng new my-first -project

cd my-first -project

ng serve

In your browser, open

http://localhost:4200/ to see the new app run when you use the ng serve command to build an app and serve it locally, the server automatically rebuilds the app and reloads the page when you change any of the source files.

When you run ng new my-first-project a new folder, named my-first-project, will be created in the  current working directory  since you want to be able to create files inside that folder, make sure you have sufficient rights in the current directory before running the command.

If the current working directory is not the the right place for your project you can change to a  more appropriate directory

by running <cd path-to-other-directory> first.

Workspaces and project files

The ng new command creates an angular workspace folder and generates a new app skeleton. A works

space can contain multiple App and libraries. The initial app created by the ng new command is at the top level of workspace. When you generate an additional app or library In a workspace,

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 De executed from within a

workspace or project folder

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 pre-projects default for CLI command options and specify Configurations to use when the CLI. builds a projects for a different target.

The ng config command lets you set and

retrieve configuration values from the command line or you edit the angular.json file directory. Note that option names in the configuration file must use camelCase while option names supplied to command can use either camelCase or dash-case

CLI command-language syntax

Command syntax is shown as follows:

ng commandNameorAlias requiredArg [optionalArg] [options]

Most commands, and some options, have aliases. Aliases are shown in the

syntax statement for each command.

Option names are prefixed with a

double dash (-). Option aliases are

Arguments are not prefixed. For

example:

ng build my-app -C production

Typically, the name generate artifact can be given as an argument to the command or specified with the - name option.

Arguments and option name can be given in either camelCase or dash-case. –myOptionName is equivalent to –my-option-name.

Boolean and enumerated options

Boolean options have two forms. -

thisopt1on sets the flag, --

thiOption sets the flag, -- noThisOption clears it. If neither

option is supplied, the flag remains in its default state, as listed in the reference documentation. Allowed values are given with each enumerated option description, with the default value in bold.

Relative paths

options that specify files can be given as absolute paths, or as paths relatives to the current working directory, which is generally either the workspace or project root.

Schematics

The ng generate and ng add commands take as an argument the artifact or library to be generated or  added to the Current project. in additional to any general options, each artifact or library defines its own options in a Schematic options are supplied to the command in the same format as

immediate command options,

Building with Bazel

optionally, you can configure the Angular CLI to use Bazel as build tool. For ore information see Building with Buzel.

---

0 0 742 0 7

---

---

* Be the first to Make Comment