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.

Bootstrap a new project
Creating new components
Serve the application

1. Bootstrap a new project

Start first by installing Angular CLI with the following command:

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.

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.

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.

** 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!