Angular is a framework that uses TypeScript and HTML for creating client-side single-page apps. It uses the libraries of TypeScript for importing the functionalities into applications. In this blog, we will discuss ‘How to Install Angular CLI 12 and Use It on Windows 10?’. Firstly, we will understand some features of Angular 12:

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

Also Read: equalizer for windows 10: Best that you can get

Angular CLI

Angular CLI is a command-line tool created by the development team of Angular. Its uses include managing, maintaining, testing, and creating Angular applications. You may get troubled using it if you favor a good UI and something that is easy to use. But you can download and install a Visual Studio Code extension. This will add a Graphical User Interface (GUI) and you can make use of that instead of the terminal.

Do we need Angular CLI for Angular development?

The short answer to the above question is No. It is not a nice approach if you are not familiar with it yet as an Angular developer. This is because Angular CLI is a creation to automate time-consuming chores resulting in the enhancement of the development speed. It builds Angular starter apps with a .gitignore file. You will be able to create every element of an app, for e.g., app shells, components, skeleton modules, pipes, test handling, and others.

Angular CLI Versions

Before moving on to the question of ‘How to Install Angular CLI 12 and Use It on Windows 10?’, let’s discuss Angular CLI Versions. Angular released its first beta version of Angular CLI in 2017 and now it has over 450 versions. Additionally, a new version is getting released every time a new Angular framework is released in the market.

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

In order to Install Angular CLI 12 and Use It on Windows 10, you have to set up a development environment first. This is for the front-end development with Angular. And then you can move on with the installation. Let’s look into the steps now.

1. Prerequisites

So, you have to keep handy the following things:

  • Firstly, NodeJS 10+ and NPM on Windows system installation. You can easily download it from the official website – NodeJS.
  • Secondly, you should have a proper understanding of TypeScript.
  • Lastly, you should also have an understanding of CMD or Powershell for Windows.

After the installation of Node.js, you need to check its version with the commands given below:

node -v

npm -v

2. How to Install Angular CLI 12 on Windows 10?

You will be able to build apps and library code with the help of Angular CLI. Additionally, it allows you to perform multiple ongoing development chores. For e.g., bundling, testing, and deployment. You can use NPM to install it. Therefore, open your Powershell or Command Prompt now. Then, write the command given below for installing Angular CLI.

npm install -g @angular/cli
/usr/bin/ng -> /usr/lib/node_modules/@angular/cli/bin/ng

> @angular/cli@10.1.1 postinstall /usr/lib/node_modules/@angular/cli

> node ./bin/postinstall/script.js

? Would you like to share anonymous usage data with the Angular Team at Google under

Google’s Privacy Policy at https://policies.google.com/privacy? For more details and

how to change this setting, see http://angular.io/analytics. Yes

+ @angular/cli@10.1.1

added 277 packages from 207 contributors in 19.024s

In case you agree, press Y; otherwise, press N. However, this answer will not affect the installation of Angular.

Let’s check the Angular version now with the command given below:

Sample Output

Angular CLI: 10.1.1

Node: 12.18.3

OS: linux x64

Angular:

...

Ivy Workspace:

Package Version

------------------------------------------------------

@angular-devkit/architect 0.1001.1

@angular-devkit/core 10.1.1

@angular-devkit/schematics 10.1.1

@schematics/angular 10.1.1

@schematics/update 0.1001.1

rxjs 6.6.2

3. Creating a New Angular App after installing Angular CLI 12 on Windows 10

Now that you know the answer to ‘How to Install Angular CLI 12?’, let’s move on to using it on Windows 10. You have to configure a workspace to develop a new Angular project. You can name it app-project.

ng new app-project

Output:

.....

......

added 1167 packages from 1048 contributors and audited 19053 packages in 72.14s

23 packages are looking for funding

run `npm fund` for details

found 0 vulnerabilities

Successfully initialized git.

4. Running Angular Application

After the creation of your test app project is completed successfully, you have to run your app. You can do so by using ng serve command.

cd app-project

ng serve --open

This will start the server, monitor your files as well as rebuild the app while those files change. Then, the browser will open  http://localhost:4200 automatically. It will happen while using the –-open (or just -o) option. This procedure of installation of Angular CLI on Windows 10 is now complete. Your Angular project will look as follows in the browser:

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

5. Creation of Modules with Angular CLI

You can use Angular modules to modularize the Angular application. To rephrase it, you can separate the Angular app into specific sections by using Angular modules. In order to build a basic module of Angular, enter the following command:

ng generate module MyModuleName

There is a chance you want more than just an Angular module according to the requirements. In that case, you can use the following command for the creation of an Angular module with its own routing module.

ng generate module MyModuleName --routing

6. Create Components with Angular CLI

Firstly, write down the Angular CLI command given below if you want to create a new Angular component.

ng generate component MyComponentName

If you want to create your own component, then you can do so by following the command given below:

ng generate component MyComponentName --module MyModuleName

7. Create Custom Pipes with Angular CLI

In order to create custom pipes, you have to execute the command given below:

ng generate pipe MyPipeName

8. Create Services with Angular CLI

Lastly, you can create a new service by following the command given below:

ng generate service MyServiceName

Do you plan to Install Angular CLI 12 and Use It on Windows 10?

Now that you know the procedure of ‘How to Install Angular CLI 12 and Use It on Windows 10?’, the question is are you planning on using it. You already know how to create different Angular items such as modules, components, and services for your project. This installation will not take much time of yours. But if you are still facing some issues then we recommend you hire professional Angular developers to help you. So, don’t hesitate and go for it.

Categorized in:

AndroidHowTo'sIOTPythonWindows

Tagged in:

,