DEV Community

Cover image for How to install and use the Angular CLI?
Daniel Kreider
Daniel Kreider

Posted on • Originally published at danielk.tech

How to install and use the Angular CLI?

#angular #typescript #javascript

What is the Angular CLI?

Here's the step-by-step guide to install the Angular CLI and build your first Angular application

Alt Text

The Angular CLI.

Just exactly what is it? And what is its purpose?

Maybe a better question is what can you do with the Angular CLI?

This Angular CLI guide will teach you everything you need to know about the Angular CLI. We're going to cover how to install the Angular CLI, the different Angular CLI versions, how to use the Angular CLI to create components and the whole bang.

Yes buddy! I'm going to show you how to grab the Angular CLI by the horns and make it obey your orders. 🥳

Table of Contents

What is the Angular CLI?

The Angular CLI is a tool that was created by the Angular team to manage, build, maintain and test your Angular projects.

You can think of it as the swiss-army knife for the Angular framework.

The Angular CLI is a command-line tool, and maybe that makes you grumble because you want something that's "easy to use". 😋

Actually, there is a Visual Studio Code extension available to download and install. It adds a GUI interface that you can then use instead of the terminal.

However, this guide focuses specifically on using the Angular CLI via the command line because that is the best way to use this powerful tool.

Do I have to use the Angular CLI?

And now that we know what the Angular CLI is maybe you're wondering if you have to use it to be an Angular developer?

The answer is actually no, you don't have to use the Angular CLI. But you'd be a... um... foolish Angular developer if you didn't use it. 🙀

Why?

Because the Angular CLI was created to turn you into a productive Angular-cranking-code-machine and automate all the time-consuming tasks. It generates starter Angular applications, complete with a .gitignore file. And generates all the core pieces of your application like skeleton modules, components, etc... as well as handling the testing, building and other common operations.

Yes, buddy! You had better use the Angular CLI even if you don't necessarily have to.

Angular CLI versions

The first beta version of the Angular CLI was released in 2017. And since more then 450 versions have showed up.

A new Angular CLI version is released with every new release of the Angular framework. So if you're using Angular 12, then there will be an Angular CLI 12 as well. This doesn't mean that Angular CLI version has to be the same as your Angular project version. More times they're not. You can use Angular CLI version that's different from your Angular project version.

How to install the Angular CLI

Before installing the Angular CLI, you'll need to install Node.js.

If you're using a Windows or Mac download it here. And for the amazing Linux guys, here's the best way to install Node.js.

And now that you've got Node.js installed, open a command prompt or terminal and type this command.

npm install -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

And that is how you globally install the Angular CLI.

Of course you'll need to update the Angular CLI to the late version. How do you do that?

npm update -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

We've installed the Angular CLI globally, meaning it's installed as a tool that you can use anywhere on your machine. Interestingly, when we create a new Angular application the CLI will also be installed locally, meaning that the Angular CLI is installed and available in the node_modules/ folder of the Angular application.

How to use the Angular CLI

So now that we've installed the Angular CLI, how do you use it?

Open a terminal or command prompt and run this command to see the basic options and available commands for the Angular CLI.

ng help
Enter fullscreen mode Exit fullscreen mode

For more details about a specific command you can type in the command name followed by --help. For example...

ng new --help
Enter fullscreen mode Exit fullscreen mode

...will give you all the command flags, details and options for creating a new Angular application.

How to create an Angular application with the CLI

Creating a bare-bones Angular application from scratch, generate all the files, install all the dependencies, etc... would take a loooong-wong time. Probably days.

With the Angular CLI, it's one simple-pimple command. Enough to make you swallow your gum.

ng new MyApplicationName
Enter fullscreen mode Exit fullscreen mode

This will create all the needed files and download all the dependencies for us, while we kick back in our chair and sip some coffee. 😎

Yes buddy, ya better be using the Angular CLI. 😃

How to start the Angular application with the CLI

Now that we've created our Angular CLI, how do we start it?

The first step is to enter the new directory via the command line. In my case this is the command I need.

cd MyApplicationName
Enter fullscreen mode Exit fullscreen mode

And now that I've entered the directory where my application is stored, here's how I start my Angular application.

ng serve
Enter fullscreen mode Exit fullscreen mode

This command will compile my Angular application, setup live-reloading and launch it in a browser.

Yes buddy, ya better be using the Angular CLI. 😃

How to create modules with the Angular CLI

Angular modules are used to modularize your Angular application. In otherwords, Angular modules are used to divide your Angular application into specified pieces. You can read more about Angular modules here.

Here's the Angular CLI command to create a basic Angular module.

ng generate module MyModuleName
Enter fullscreen mode Exit fullscreen mode

Depending on the case, you might want more then just a basic Angular module. Maybe you want an Angular module with its own routing module? Then here's how you make the Angular CLI do it for you.

ng generate module MyModuleName --routing
Enter fullscreen mode Exit fullscreen mode

Yes buddy, ya better be using the Angular CLI. 😃

How to create components with the Angular CLI

Here's the Angular CLI command to create a new Angular component.

ng generate component MyComponentName
Enter fullscreen mode Exit fullscreen mode

And if for some strange reason you need to specify the module for this specific component, then here's how to do it.

ng generate component MyComponentName --module MyModuleName
Enter fullscreen mode Exit fullscreen mode

Yes buddy, ya better be using the Angular CLI. 😃

How to create custom pipes with the Angular CLI

Here's the Angular CLI command to create an Angular pipe.

ng generate pipe MyPipeName
Enter fullscreen mode Exit fullscreen mode

Yes buddy, ya better be using the Angular CLI. 😃

How to create a services with the Angular CLI

Here's the Angular CLI command to create an Angular service.

ng generate service MyServiceName
Enter fullscreen mode Exit fullscreen mode

Yes buddy, ya better be using the Angular CLI. 😃

Cool Angular CLI commands worth memorizing

Want to turn your Angular app into a PWA (progressive web app)? Here's how to do it.

ng add @angular/pwa
Enter fullscreen mode Exit fullscreen mode

Have some question about an Angular feature? Maybe a question about Angular pipes? Then use this command.

ng docs pipe
Enter fullscreen mode Exit fullscreen mode

This will query the Angular docs for whatever keyword you choose. And the best thing is that it reads your local Angular version and does the documentation lookup for that specific version of Angular. If you're using Angular 8, it will check the docs for Angular 8 even if the latest Angular release is version 12.

Here's how to check your Angular version. This will display local (if exists) and global versions.

ng --version
Enter fullscreen mode Exit fullscreen mode

To generate a route guard that you can use to protect your routes.

ng generate guard your-guard
Enter fullscreen mode Exit fullscreen mode

Yes buddy, ya better be using the Angular CLI. 😃

Conclusion

In this article we've covered what the Angular CLI is, what it is useful for and how to use it.

The Angular CLI is the most important tool as an Angular developer. Without it, building Angular apps would be like chewing on glass.

Yup! Buddy! Ya better be using the Angular CLI. 😃

Questions? Comments? Don't hesitate to reach out.

Alt Text

Top comments (0)

Read next

midhul profile image

Handling Async Errors in JavaScript: A Quick Guide

Midhul P -

danieljcafonso profile image

This Month in Solid #9: SolidHack started, new fellow and API change 😎

Daniel Afonso -

m1dnightdev profile image

Creating Theme Systems in React with SCSS and Redux

M1dnightGMR -

philip_zhang_854092d88473 profile image

Mastering Server-Sent Events (SSE) with Python and Go for Real-Time Data Streaming 🚀

Philip -