Angular CLI

The Angular CLI is a tool that runs in your terminal and builds Angular projects for you. CLI stands for Command Line Interface. You type short commands, and the tool creates files, starts a server, and prepares your app for visitors. A kitchen assistant who chops vegetables while you cook plays a similar role. The CLI handles repeated work so you can focus on your application.

Install the CLI

Node.js must exist on your computer first. Open the terminal and run this command to install the CLI for all projects.

npm install -g @angular/cli
ng version

The second command prints the installed version. If you see a version number, the installation worked.

How the CLI Works

  You type a command
         |
         v
+------------------+
|   Angular CLI    |
+------------------+
   |      |      |
   v      v      v
 Creates Serves Builds
 files   the    the final
         app    package

Create a New Project

The ng new command creates a complete project folder. The CLI asks a few questions about styling and rendering. Press Enter to accept the defaults while you learn.

ng new school-app
cd school-app

Run the Project

The ng serve command starts a local server. Open http://localhost:4200 in your browser to see the app. The server watches your files. Every time you save a change, the browser refreshes by itself.

ng serve --open

The --open option launches the browser automatically.

Generate Code

The ng generate command creates ready-made building blocks. Each building block arrives with the right file names and the right starter code. The short form is ng g.

ng generate component student-list
ng generate service student
ng generate pipe short-text
ng generate directive highlight

Common Generate Types

Build for Visitors

The ng build command packs your application into a small set of files. The CLI removes unused code and shrinks the files. The output lands in the dist folder. You upload that folder to a web host.

ng build

Run Tests

The ng test command runs your unit tests and reports passes and failures. Write tests as you build, and run this command often.

ng test

Update Angular

The ng update command upgrades Angular packages and applies automatic fixes to your code. Run it when a new Angular version arrives.

ng update @angular/core @angular/cli

Useful Options

• --dry-run shows what a command would create without writing any file.
• --skip-tests creates a component without a test file.
• --standalone creates a component that needs no module.
• ng help lists every command with a short description.

Daily Workflow

ng new  -->  ng serve  -->  ng generate  -->  ng test  -->  ng build
 start        preview        add parts        verify        publish

Most days you repeat the middle three steps. You generate a part, preview it in the browser, and test it. When the feature works, you build the package.

Key Points

• The CLI creates, runs, tests, and builds Angular projects.
• Use ng new to start and ng serve to preview.
• Use ng generate to create components, services, pipes, and more.
• Use ng build to produce the files for your web host.