By Kimserey Lam with

# Angular Cli

Jun 27th, 2017 - written by Kimserey with .

In order to facilitate the creation of a new Angular project, it is possible to use the Angular CLI. Angular CLI is a CLI providing functionality to bootstrap, upgrade and serve your Angular app. Today we will see how we can use Angular CLI to improve our workflow.

1. Bootstrap a new project
2. Creating new components
3. Serve the application

## 1. Bootstrap a new project

Start first by installing Angular CLI with the following command:

1
npm install -g @angular/cli


After the installation, the cli should be available globally via the ng command. You can try it with ng help. To bootstrap a project, we use ng new my-new-project. We can also specify some options, here we specify that we want to skip the tests creation which is set to true by default, we want inline style and inline template.

1
ng new my-new-project --skip-tests --inline-style --inline-template


This creates the simplest Angular app. We have the main module app.module.ts and component app.module.ts. In order to build the project we can use ng build.

## 2. Creating new components

AngularCLI also helps in creating all the boilerplate needed for creating components.

1
ng g my-component --flat -is -it


Here we specify -is for inline style and -it for inline template both are short forms for --inline-xxx. Other than component, we can also use this command to create directives, services, pipes and guards.

## 3. Serve the application

We can then try out the app using ng serve. The app is served by default on localhost on the port 4200.

1
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **


Our application will run and the source code will be watched too therefore every changes in the code will provoke a recompilation and update of the browser.

# Conclusion

AngularCLI makes life easier for developing Angular application. It also handle test generation and execution which I haven’t covered. A full list of command can be found by doing ng help. Hope you liked this post as much I enjoyed writing it. See you next time!

Designed, built and maintained by Kimserey Lam.