How To Install And Set Up Angular 9 On Windows 10

On February 7th, 2020, a new version of Angular is released which is Angular 9. A lot of new features and performance improvements are introduced with this release. Here in this article, we will discuss some features in Angular 9 and the steps to install Laravel 9 on Windows 10.

2020年2月7日，发布了新版本的Angular，即Angular9。此版本引入了许多新功能和性能改进。在本文的此处，我们将讨论Angular 9的一些功能以及在Windows 10上安装Laravel 9的步骤

I am not entering to the explanation of new features in Angular 9 but listed out some of them below.

• Ivy – This is the next-generation compilation and rendering pipeline introduced by Angular with this release.

  lvy 这是Angular在此版本中引入的下一代编译和渲染管道

• Smaller bundle sizes- Small apps and large apps can see the most dramatic size savings in Angular 9.

  Angular 9可以在小型应用程序和大型应用程序中看到最大最大尺寸的节省

• Faster testing- implemented an improved version of TestBed in Ivy to make it more efficient.

  在Ivy中实现了TestBed的改进版本以使其更高效

• Better debugging- Ivy provides you with more tools to debug the application.

  Ivy为您提供了更多调试应用程序的工具

• Improved CSS class and style binding – Handling styles is now easier with Ivy compiler and runtime.

  改进的CSS类和样式绑定 现在，使用Ivy编译器和运行时更容易处理样式

• Better type checking- Now Angular compiler can apply strict rules when coding an app which reduces the bugs in a team project.

  更好的类型检查 现在，Angular编译器可以在编写应用程序时应用严格的规则，从而减少团队项目中的错误

• All the error messages are now easier to read.

  现在，所有错误消息都更易于阅读

• Improved build-time – Now building a project is faster compared to the previous version.

  与以前的版本相比，现在构建项目的速度更快

• Internationalization – You can build the application once per locale and receive highly optimized and localized applications.

  国际化 您可以在每个区域设置一次构建应用程序，并接收高度优化和本地化的应用程序

Install Angular 9 on Windows 10

1. Install Node.js

We need NPM to install Angular CLI. To install Node.js on your system and NPM will install with Node.js.

我们需要NPM来安装Angular CLI。因此要在系统上安装Node.js，NPM将与Node.js一起安装

To install Node.js, go to the official Node.js website, download the latest version and install it.

After the installation, check the versions using the below commands.

node -v
npm -v

This will show the installed versions of Node.js and NPM.

Note: If you are really a beginner in this field, the guide Steps to install Node.js and NPM on Windows 10 will help you.

2. Install Angular CLI

Angular CLI helps us to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

Angular CLI帮助我们创建项目，生成应用程序和库代码，并执行各种正在进行的开发任务，例如测试，构建和部署

It can simply be installed using NPM. So first, open our Command Prompt / Powershell and install the Angular CLI with the below command.

只需使用NPM即可安装。因此，首先打开我们的命令提示符/ Powershell，然后使用以下命令安装Angular CLI

npm install -g @angular/cli

This will ask you a question.

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.

You can either agree or disagree with the question. Press y and Enter for agreeing and n and Enter if you are disagreeing. This answer won’t affect the Angular installation

3. Creating a New Angular Application

You have successfully installed Angular CLI on our system and now you can set up a workspace for Angular projects in the system and create a new app. This can be done with the below command.

您已经在我们的系统上成功安装了Angular CLI，现在您可以在系统中为Angular项目设置工作区并创建一个新应用。可以使用以下命令完成此操作

ng new awesome-project

This will ask you two questions.

1. Would you like to add Angular routing?

press y if you are preferring t to create a multi-page website. Otherwise choose n.

2. Which stylesheet format would you like to use?

Choose any stylesheet format that you are familiar with. Here I chose CSS.

4. Running Our App

Now, the app you created can be run using ng serve command.

现在，您可以使用ng serve命令运行您创建的应用程序

cd awesome-project
ng serve --open

This launches the server, watches our files, and rebuilds the app as we make changes to those files. The –-open (or just -o) option automatically opens our browser to the address http://localhost:4200.

这将启动服务器，监视我们的文件，并在我们对这些文件进行更改时重构应用程序。––open（或仅-o）选项会自动将浏览器打开到地址http://localhost:4200

TechoTip: We recommend using Visual Studio code as the source-code editor for working with Angular projects.

Summary

So, we have discussed the steps to install Node.js on our Windows 10 system and installation on Angular 9 using NPM(Node Package Manager).