What is Angular CLI?
For the uninitiated, Angular CLI is a Command Line Interface to build Angular apps quickly adhering to the best practices. Angular CLI has multiple advantages, some which are listed below for quick reference.
In this blog post, we’ll dwell on why we need Angular CLI, how to install it, how to use it i.e. the various commands that it offers to make our life easy. We’ll also look at how we can generate production ready builds using the angular CLI.
Why do we need Angular CLI?
- It creates and provides a scalable project structure
- It initializes a git repository and makes an initial commit.
- It handles all common tedious tasks out of the box.
- It generates initial HTML, typescript, CSS and unit test files.
- It creates a package.json with all the dependencies of Angular 2 and installs all the dependencies of node (npm install)
- It configures Karma to execute the unit tests with Jasmine
- It configures Protractor to execute the end-to-end tests.
- It creates all the files necessary to create a build of the application for production.
Let’s start with the basics
How to install Angular CLI ?
Please note that Angular CLI is a node package and it requires a node version > 4.
To check the node version on your machine. use the command –
If you do not have node installed or you have node that is older than version 4. Then, you should consider updating the node. At the time of this blog post, the latest stable version of node is v7.9.0.
Once you have node installed, you also have the NPM (node package manager) installed. To check if you have npm installed, all you need to do is –
Now, we can install the Angular CLI using –
npm install -g angular-cli
Now we are ready to use Angular CLI
Using Angular CLI –
- ng new <<name_of_the_project>>
Creates an angular project with all the files, folders, packages, needed and npm install is executed.
Ex 1 –
ng new hello-world (a project is created in the directory that you are currently on)
Ex 2 –
ng new path/hello-world (Using a relative path)
Project name “01-test” is not valid. New project names must start with a letter, and must contain only alphanumeric characters or dashes. When adding a dash the segment after the dash must also start with a letter.
Project Structure – This is how an angular 4 project structure looks.
- ng init
Creates an angular project in the current directory
mkdir name_of_the_project // Creates a directory
cd name_of_the_project ng init
- ng serve (also, ng server and ng s)
Serves an angular project via a development server. It’s very similar to “npm start”.
ng-serve is executed without any errors, then you should be able to check the result in
Note – The default port used is 4200 and the live reload port used is 49512.
To use othert ports –
ng serve —port 4201 —live-reload-port 49153
- ng generate (also, ng g)
Creates Components, Services, Pipes, and other classes.
|Component||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|
|Class||ng g class my-new-class|
|Guard||ng g guard my-new-guard|
|Interface||ng g interface my-new-interface|
|Enum||ng g enum my-new-enum|
|Module||ng g module my-module|
- Using pre-processors using Angular CLI
Using style flag during the creation of the angular project
ng new my-project —style=sass
ng new my-project —style=less
ng new my-project —style=stylus
Using ng set – To add or modify the preprocessor in an existing project-
ng set defaults.styleExt scss
ng set defaults.styleExt less
ng set defaults.styleExt styl
- ng lint
To perform the js lint. To check for errors like – unused imports, unexpected spaces, extra comma etc.
If we declare the variable in the below manner and run ng lint –
myVariable : String; ❌
Expected no space before colon in property-declaration.
myVariable: String; ✔
- ng test
Executes the jasmine unit tests in the spec.ts files and returns the details of the total tests run and those that failed.
- ng e2e
Runs the end to end tests written using the Protractor framework in the e2e folder
- ng build
Generates a build (development build, production build).
The build is generated inside the dist folder, which is ignored by the version control.
Creating a Development build
ng build --target=development --environment=dev
ng build --dev --e=dev
ng build --dev
Creating a Production build
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod
Note that the development build is neither obfuscated nor minified. Also, it doesn’t consider the browser caching which might lead to unexpected behaviour of the application.
- ng version
Returns the versions of angular-cli, node and the operating system.
- ng help
Outputs all the available angular cli commands.