home
Angular CLI cheat sheet
CLI tool for Angular
print

Angular CLI need Node 4++ with NPM 3++

Installation

npm install -g @angular/cli yarn global add @angular/cli

Usage

Generating an Angular project ng new <project_name> cd <project_name>

Serving via development server ng serve

Navigate to http://localhost:4200/. The app will automatically reload if you change any source files.

Change port and LiveReload port ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153

Build

Creating a build : the artifacts will be stored in the dist/ directory. ng build

Build targets and environment, the mapping used can be found in angular-cli.json : ng build --target=production --environment=prod

Angular CLI supports AOT compilation by running : ng build --aot

current version: 12.1.0 - Date: Oct 2021

Test

Running unit tests ng test

Running end-to-end tests ng e2e

Generating Components, Directives, Pipes and Services

You can use the ng generate (or just ng g) command to generate :

Components ng g component my-new-component Directive ng g directive my-new-directive Pipe ng g pipe my-new-pipe Service ng g service my-new-service Interface ng g interface my-new-interface Enum ng g enum my-new-enum Module ng g module my-new-module Module with module routes ng g module my-new-module --routing

Angular CLI cheat sheet

Linting code

ng lint

Help

ng help

Prepocessor integration

Angular CLI supports all major CSS preprocessors: sass/css, less, stylus

When generating a new project you can also define which extension you want for style files:

ng new <project> --style=<scss|sass|less|stylus>

Or set default style on existing project:

ng set defaults.styleExt <scss|sass|less|stylus>

Deploying the app via GitHub Pages

You can deploy your apps quickly via:

ng github-pages:deploy --message "Optional commit message"

searching anuglar documentation

You can quicly search official documnentation via: ng doc <keyword>

Update your dependencies

ng update <package>

Add capability

For example, turn your application into a PWA

ng add @angular/pwa

Updating angular-cli

To update angular-cli to a new version, you must update both the global package and your project's local package.

Global package:

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

Local project package:

rm -rf node_modules dist # use rmdir on Windows
ng update @angular/cli @angular/core

3rd Party Library Installation

Simply install your library via npm install lib-name --save and import it in your code.

If the library does not include typings, you can install them using npm:

npm install d3 --save
npm install @types/d3 --save-dev