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
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.
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:
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
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:
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
..... ...... 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.
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:
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.