Angular CLI - Command line interface tool

Introduction to Angular CLI

Angular CLI is a tool used to create, run, build, and manage Angular applications using commands.


Angular CLI is a tool that helps developers develop Angular applications.

In development, Angular CLI helps with:

  1. Creating an application
  2. Running the application
  3. Building the application
  4. Testing the application
  5. Deploying the application

So, in short, Angular CLI helps manage the complete Angular application lifecycle.


CLI is Important

Angular CLI is used in almost every step of Angular development. Using CLI makes work faster and easier.

Main uses:

  1. Creating a fresh Angular application
  2. Running the application
  3. Generating components, services, pipes, etc.
  4. Creating application build
  5. Running unit tests

Because of this, Angular CLI is a very important tool.


Installing Angular CLI

Angular CLI is installed using npm (Node Package Manager).

Important points:

  1. npm is required to install Angular CLI
  2. CLI is installed globally using -g
  3. After installation, ng commands can be used from any folder

Once installed, all Angular commands use ng, not npm.


Checking Angular CLI Installation

To check whether Angular CLI is installed or not, run this command:

  1. ng version

This command shows:

  1. Angular version
  2. Angular CLI version
  3. Node version
  4. Package manager version
  5. Operating system details

If this command does not work, it means Angular CLI is not installed properly.


Angular CLI Help Command

Angular CLI provides a help command:

  1. ng help

This command shows all available commands, such as:

  1. create new application
  2. build
  3. serve
  4. generate
  5. test
  6. update
  7. version

This is useful to understand what Angular CLI can do.


Creating a New Angular Application

To create a new Angular project, Angular CLI is used.

Main idea:

  1. ng new app-name

This creates a fresh Angular application with proper folder structure.


Generating Components Using Angular CLI

Components are generated using Angular CLI commands.


Key points:

  1. Components are generated inside the app folder
  2. The app component is the root component
  3. All other components are created inside it

Commands:

  1. Full command: ng generate component component-name
  2. Short command: ng g c component-name

Both commands do the same thing.


Generating Services

Services are used for things like API calls.

Important points:


  1. Services do not automatically create a folder
  2. It is better to create services inside a specific folder

Command example idea:

  1. ng generate service service-name
  2. Folder can be added using / (folder/service-name)


Generating Pipes

Angular CLI can also generate pipes.

Key idea:

  1. Pipes can be created using ng generate pipe pipe-name
  2. Folder structure can also be used
  3. CLI generates required files automatically

Even if a typo happens, CLI still creates files based on the command.


Running the Angular Application

To run the application:

  1. ng serve

To automatically open the browser:

  1. ng serve --open

This runs the app and opens it in the browser at the same time.


Building the Application

Angular CLI is also used to create the build of the application.

  1. ng build

This command generates a production-ready build.