How to Install Angular CLI 12 and Use It on Windows 10?

Angular is a framework and platform for building client-side single-page applications using TypeScript and HTML. Since Angular is written in TypeScript, it uses its libraries for the functionalities we import into applications.

In this given article, we are going to discuss Angular CLI 12 and a step-by-step guide to installing Angular on Windows. Before that, let's understand what type of features Angular 12 offers:

• Component Test Harnesses
• Updated Language Service Preview
• Automatic Font Inlining
• HMR Support
• Enhanced Logging and Reporting
• Support for Webpack 5
• Angular ESLint Updates
• Faster Builds

So, now the question is, what is Angular CLI? And how can we use it? This tutorial will give you a better understanding of Angular CLI.

What is Angular CLI?

Angular CLI is an Angular tool created by the development team from Angular. It’s used to manage, build, maintain, and test Angular applications.

The Angular CLI is a command-line tool, which may trouble you if you prefer something with a good UI and is "simple to use." There is, in fact, a Visual Studio Code extension that can be downloaded and installed. It adds a Graphical User Interface (GUI) that can be utilized instead of the terminal.

Do We Need to Use Angular CLI?

Now, we have got some idea about the Angular CLI. And maybe, if you are wondering, do we need to use Angular CLI for the Angular development?

Well, the short answer is NO. But, it’s not a good approach if you haven't used it yet as an Angular developer.

Why?

Actually, Angular CLI was created to automate time-consuming tasks and enhance the development speed. It creates Angular starter apps with a .gitignore file. It helps you build every element of an app, like pipes, app shells, components, skeleton modules, test handling, and other common operations.

Angular CLI Versions

Back in 2017, Angular released its first beta version Angular CLI. And since then, it has had over 450 versions.

With every new Angular framework coming into the market, a new Angular CLI version is released. So, if you are using Angular 12 right now, there will also be an Angular CLI 12 in the market. That is the Angular CLI latest version. This does not mean that the Angular CLI version must be the same as the Angular project version. The majority of the time, they aren't. In your Angular project, you can use a different version of the Angular CLI.

Create an Angular App with Angular CLI

Initiate the Development

Step 1: Prerequisites

Before coming to the actual topic of Angular CLI 12 installations, you will need to set up a development environment for front-end development with Angular.

You should be ready with the following things:

• NodeJS 10+ and NPM on your Windows system installation. Download it from the official website – NodeJS. Or check out the tutorial on - How to install Node.js and NPM?
  (If Node and NPM are installed on your desktop, you can easily build a website using TezJS. It actually requires zero learning curve for JavaScript developers.)
• Understanding of TypeScript
• Understanding of CMD or Powershell for Windows

Once Node.js is installed, check its version with the following commands:

node -v

npm -v

Step 2: How to Install Angular CLI 12 on Windows 10?

With Angular CLI, you can create apps and library code. Also, it lets you perform multiple ongoing development tasks, like bundling, testing, and deployment.

You can install it using NPM. So, open your Powershell or Command Prompt first and write the given command to install Angular CLI.

npm install -g @angular/cli

If you agree, press Y; otherwise, N. This answer won’t affect the Angular installation.

Now check the Angular version with the below command.

ng --version

Sample Output

Step 3: Creating a New Angular Application in Windows 10

Angular CLI is successfully installed on your Windows. Now, you can configure a workspace to create a new Angular project named app-project.

ng new app-project

Output:

Step 4: Running Angular Application

Once your test app project is created successfully, run your app using ng serve command.

cd app-project

ng serve --open

This starts the server, monitors our files, and rebuilds the app as those files change. The browser will automatically open to the address http://localhost:4200 when we use the –-open (or just -o) option.

Finally, the process of installing Angular CLI on Windows 10 is completed.

Here’s what your Angular project will look like in the browser.

Source: angularangular.ioio

Step 5: Creating Modules with Angular CLI

The Angular application can be modularized using Angular modules. In other words, Angular modules are used to separate the Angular app into specific sections.

To create a basic Angular module, use the given Angular CLI command.

ng generate module MyModuleName

You might need more than just an Angular module as per requirements. Here's an Angular CLI command you can use to create an Angular module with its own routing module.

ng generate module MyModuleName --routing

Step 6: Creating Components with Angular CLI

To create a new Angular component, let’s write down the below Angular CLI command.

ng generate component MyComponentName

In case you want to build your own component, then with the following command, you can make it possible.

ng generate component MyComponentName --module MyModuleName

Want to Create a Feature-rich Angular App?

Leverage Our Services

Step 7: Creating Custom Pipes with Angular CLI

You can execute the below command to create custom pipes.

ng generate pipe MyPipeName

Step 8: Creating Services with Angular CLI

To create a new service, follow below given command.

ng generate service MyServiceName

Are You Planning to Install Angular CLI?

You've now understood how to install Angular CLI 12 on Windows and use it to create an Angular project that works. Thankfully, installing the Angular CLI process is the same for every version of the Windows operating system.

Moreover, you have also understood creating various Angular items like modules, components, and services for your project. It hardly takes much time to completely install and set up an Angular app once you have installed Node.js (NPM) and Angular CLI onto your system.

If you still face any issues while installing Angular CLI or developing an Angular application, you can hire Angular developers from an experienced company – Radixweb. Our expertise and industry knowledge will help you develop a feature-rich Angular application in a short time. So, what are you waiting for? Get in touch with us now!