Angular CLI — Quick Guide

Angular CLI — Quick Guide

Angular CLI is one fantastic tool that we will explore through this post. The entire post will be a Quick Guide for it, so if you are a beginner, this post should get you into understanding it.

If you wish to see this post in a video format, click this link → https://youtu.be/t9m_O_SOcSw

If you are into Angular, you can learn it here → https://bit.ly/3hdZvRX

What is Angular CLI??

Angular CLI stands for Command Line Interface and it is for Angular Technology. It was developed by Google as Angular is as well.

The main goal of this tool is to help you to Develop, Initialize and Maintain Angular Projects.

Installation

Installing Angular CLI will also install the latest version of Angular. To do that, run the next command.

npm install -g @angular/cli

This command will install Angular and Angular CLI globally on your machine.

With the installation finished, you will be able to use the help command.

ng help

The help command will show you the entire list of commands that you can use and it should look something like this.

ng help Command Result

Angular CLI will offer us nice automation through its commands.

Generating a Project

One such Automation Command could be to generate an Angular project. Command itself will create all necessary files and set up the entire project for us.

ng new my-todo-app

In this example, I am creating a new Angular Application which is called my-todo-app.

Replace your application name with mine and you are good to go.

Running a Project Locally

To run your generated project, we first must go into our project and use a command which will open our project on http://localhost:4200.

cd my-todo-app
ng serve

The first command will route ourselves into our project, in my example my-todo-app.

The second command will serve our Angular Project on a local host.

Generate

Even if the creation of Angular application and serving those is nice feet, there is much more automation that we can do with Angular CLI.

For example, we can generate files for our Angular applications like Modules, Components, Services, Guards, and others as well.

ng generate --help

Passing help flag next to generate command, you will get all different files that Angular CLI can generate.

Creating a Component

To create or generate Angular Component with Angular CLI we can run the next method.

ng generate component todo

This will generate our todo folder with todo component files like HTML, CSS, TS, and test file which is SPEC.TS.

Testing

Next to the generation of specific files, Angular CLI can help us with testing as well.

ng test

Command of test will run our testing files and give back to our results of tests.

Angular uses Jasmin and Karma for testing.

Linting

Linting can help us to clear our code and remove redundant code.

ng lint

Command itself will check all of our files and give us the result of that check. If there were some errors or warnings, it will point those to us, so we could resolve those.

Conclusion

This is a quick guide for Angular CLI and if you liked this post, make sure to comment on it and I can create another with more in-depth details about Angular CLI.

If you wish to see this post in a video format, click this link → https://youtu.be/t9m_O_SOcSw

If you are into Angular, you can learn it here → https://bit.ly/3hdZvRX

Until the next time.