Angular CLI and Command Reference







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


Installing Angular CLI The main versions of Angular CLI are supported by the major version of Angular, but minor versions can be released separately.


Install the CLI by using the npm package manager:

npm install -g @angular/cli

For details on changes between versions and update information from previous releases, see the GitHub releases tab: https:/github.com/angular/angular-cli/releases.


Basic workflow:


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 server, use the following commands in the parent directory of your new workspace:

ng new my-first-project
cd my-first-project
ng serve

Open http:/localhost:420/ in your browser to see the new app running. When you use the ng serve command to build an app and serve it locally, the server will automatically restore the app and reload the site if you modify any of the source files.

Once 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 in that folder, make sure you have enough rights in the current working directory before running the order.
If the current working directory is not the right place for your task, you can first switch to a more suitable directory by running cd < path-to-other-directory > first.

Workspaces and project files :


The new ng command creates an Angular Workspace folder and generates a new app skeleton. You can have multiple apps and libraries in a workspace. The initial app generated by the new ng command is at the top level of the workspace. If you create an additional device or library in a workspace, it goes to a project / subfolder.


The newly generated app contains the source files for the root module, the root element and the model. -app has a src folder containing logic, data, and properties.


You can directly edit the created files or add and change the generated files using the CLI commands. Use the ng generate command to add new files to external components and facilities, and code to new pipes, instructions, and so on. Commands, such as add and generate, which build or operate on apps and libraries, must be executed from within a workspace or project directory.


See more about the layout of the Workspace archive.


Workspace and task configuration:


A single workspace configuration file,angular.json, is generated at the top of the workspace. This is where you can set the defaults for CLI command options per task, and configure the configurations to be used when the CLI constructs a project for different targets.


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


See more about Configuring Workspace.

See the complete schema of angular.json.


CLI command-language syntax:


The syntax command is shown as follows:

 ng commandNameOrAlias requiredArg[ optionalArg][ options] 

Most commands and some options have aliases. The aliases for each command are shown in the syntax statement.


The names of options are prefixed with a double dash(—). Optional aliases are prefixed with a single dash-). Arguments aren't prefixed. For example:

ng build my-app -c production

Typically, the name of the generated artifact can be entered as an argument to the command or specified with the name option.


Argument and option names can be entered in either the camelCase or the dash-case. —myOptionName is equivalent to— my-Option-Name.


Boolean and enumerated options:


The Boolean options have two forms:— thisOption sets the flag,—-noThisOption clears it. If neither option is provided, the flag will remain in its default state as indicated in the reference documentation.


Allowed values are provided with each specified option description and the default value is bold.


Relative paths:


Options that specify files may be given as absolute paths, or as relative paths to the current working directory, which is generally either a workspace or a project root.


Schematics:


The ng generate and ng add commands take the artifact or library to be generated or added to the current project as an argument. In addition to any general options, each artifact or library defines its own schematic options. Schematic options are provided to the command in the same format as the immediate command options.


For Command Overview check out the next article !!


93 views
Never Miss a Post. Subscribe Now!

Contact Us: nawabblog@gmail.com

Location : Bangalore India.

© 2019 proudly created  by Nawab Ahmad. 

  • Nawab Ahmad
  • Grey Twitter Icon
  • Nawab Ahmad