如何在 Windows 上安装 Angular：Angular CLI、Node.js 和构建工具指南

本文翻译自How to Install Angular on Windows: A Guide to Angular CLI, Node.js, and Build Tools，作者为Ahmed Bouchefra

在本教程中，我们将学习如何在 Windows 中安装 Angular CLI 并使用它来创建 Angular 项目。

什么是 Angular CLI？

Angular CLI 是用于初始化和使用 Angular 项目的官方工具。它使您免于复杂配置和构建工具（如 TypeScript、Webpack 等）的麻烦。

安装 Angular CLI 后，您需要运行一个命令来生成一个项目，并运行另一个命令来使用本地开发服务器来运行您的应用程序。

与当今大多数现代前端工具一样，Angular CLI 构建在 Node.js 之上。

Node.js 是一种服务器技术，允许您在服务器上运行 JavaScript 并构建服务器端 Web 应用程序。但是，Angular 是一种前端技术，因此即使您需要在开发计算机上安装 Node.js，它也仅用于运行 CLI。

一旦构建了用于生产的应用程序，您将不需要 Node.js，因为最终的捆绑包只是静态 HTML、CSS 和 JavaScript，可以由任何服务器或 CDN 提供服务。

虽这么说，如果您正在使用 Angular 构建全栈 Web 应用程序，并且您喜欢使用 JavaScript 作为前端和后端，则可能需要 Node.js 来创建后端部分。

查看 MEAN 堆栈——它是一个包含 MongoDB、Express（构建在 Node.js 之上的 Web 服务器和 REST API 框架）和 Angular 的架构。如果您想要逐步入门教程，可以阅读本文。

在本例中，Node.js 用于构建应用程序的后端部分，并且可以替换为您想要的任何服务器端技术，例如 PHP、Ruby 或 Python。但 Angular 不依赖 Node.js，除了它的 CLI 工具和从 npm 安装包。

NPM 代表Node包管理器。它是托管 Node 包的注册表。近年来，它还被用来发布前端包和库，如 Angular、React、Vue.js 甚至 Bootstrap。

注意：您可以免费下载我们的《Angular 8 书：使用 Angular 8 构建您的第一个 Web 应用程序》。

在 Windows 上安装 Angular CLI

首先，您需要在开发计算机上安装 Node 和 npm。有很多方法可以做到这一点，例如：

使用 NVM（Node版本管理器）在系统中安装和使用多个版本的node
使用对应的操作系统的官方包管理器
从官方网站安装它。让我们保持简单并使用官方网站。只需访问下载页面并获取 Windows 的二进制文件，然后按照安装向导操作即可。

您可以通过在命令提示符中运行以下命令来确保系统上安装了 Node，该命令应显示已安装的 Node 版本：

代码语言：javascript

复制

$ node -v

接下来，运行以下命令来安装 Angular CLI：

代码语言：javascript

复制

$ npm install @angular/cli

命令成功完成后，您应该已经安装了 Angular CLI。

Angular CLI 快速指南

安装 Angular CLI 后，您可以运行许多命令。让我们首先检查已安装的 CLI 的版本：

代码语言：javascript

复制

$ ng version

如下图所示：

您可能需要运行的第二个命令是 help 命令，用于获取完整的使用帮助：

代码语言：javascript

复制

$ ng help

CLI 提供以下命令： add: 向您的项目添加对外部库的支持。 build (b): 将 Angular 应用程序编译到给定输出路径上名为 dist/ 的输出目录中。必须从工作空间目录中执行。 config: 检索或设置 Angular 配置值。

doc (d): 在浏览器中打开 Angular 官方文档 (angular.io)，并搜索给定的关键字。

e2e (e): 构建并提供 Angular 应用程序，然后使用 Protractor 运行端到端测试。

generate (g): 根据原理图生成和/或修改文件。

help: 列出可用命令及其简短描述。

lint (l): 在给定项目文件夹中的 Angular 应用程序代码上运行 linting 工具。

new (n): 创建一个新的工作区和一个初始的 Angular 应用程序。

run: 运行项目中定义的自定义目标。

serve (s): 构建并服务您的应用程序，根据文件更改进行重建。

test (t): 在项目中运行单元测试。

update: 更新您的应用程序及其依赖项。请参阅https://update.angular.io/

version (v): 输出 Angular CLI 版本。

xi18n: 从源代码中提取 i18n 消息。

生成项目

您可以使用 Angular CLI 通过在命令行界面中运行以下命令来快速生成 Angular 项目：

代码语言：javascript

复制

$ ng new frontend

注意：frontend是项目的名称。当然，您可以为您的项目选择任何有效的名称。由于我们将创建一个全栈应用程序，因此我使用 frontend 作为前端应用程序的名称。

如前所述，CLI 会询问您是否要添加 Angular 路由？，您可以通过输入 y（是）或 n（否）来回答，这是默认选项。它还会询问您要使用的样式表格式（例如 CSS）。选择您的选项并按 Enter 键继续。

之后，您将使用目录结构和一堆配置和代码文件创建项目。它将主要采用 TypeScript 和 JSON 格式。我们看看各个文件的作用：

/e2e/：包含网站的端到端（模拟用户行为）测试
/node_modules/：使用 npm install 将所有 3rd 方库安装到此文件夹
/src/：包含应用程序的源代码。大部分工作将在这里完成
/app/：包含模块和组件
/assets/：包含图像、图标和样式等静态资源
/environments/：包含环境（生产和开发）特定的配置文件
browserslist：autoprefixer 需要 CSS 支持
favicon.ico：网站图标
index.html：主要的 HTML 文件
karma.conf.js：Karma（测试工具）的配置文件
main.ts：AppModule 引导的主启动文件
polyfills.ts：Angular 所需的 polyfill
styles.css：项目的全局样式表文件
test.ts：这是 Karma 的配置文件
tsconfig.*.json：TypeScript 的配置文件
angular.json：包含 CLI 的配置
package.json：包含项目的基本信息（名称、描述和依赖项）
README.md：包含项目描述的 markdown 文件
tsconfig.json：TypeScript 的配置文件
tslint.json：TSlint（静态分析工具）的配置文件

为您的项目服务

Angular CLI 提供了一个完整的工具链，用于在本地计算机上开发前端应用程序。因此，您不需要安装本地服务器来为您的项目提供服务 —您可以简单地从终端使用 ng serve 命令在本地为您的项目提供服务。

首先导航到项目的文件夹中并运行以下命令：

代码语言：javascript

复制

$ cd frontend
$ ng serve

您现在可以导航到 http://localhost:4200/ 地址来开始使用您的前端应用程序。如果您更改任何源文件，该页面将自动实时重新加载。运行结果如下图所示：

生成Angular构件

Angular CLI 提供了 ng generate 命令，可帮助开发人员生成基本的 Angular 构件，例如模块、组件、指令、管道和服务：

代码语言：javascript

复制

$ ng generate component my-component

my-component 是组件的名称。 Angular CLI 将自动在 src/app.module.ts 文件中添加对组件、指令和管道的引用。

如果您想将组件、指令或管道添加到另一个模块（主应用程序模块 app.module.ts 除外），您只需在组件名称前加上模块名称和斜杠即可：

代码语言：javascript

复制

$ ng g component my-module/my-component

my-module 是现有模块的名称。

结论

在本教程中，我们了解了如何在 Windows 计算机上安装 Angular CLI，并使用它从头开始初始化一个新的 Angular 项目。

我们还看到了您可以在整个项目开发过程中使用的各种命令来生成 Angular 工件，例如模块、组件和服务。

查看我们的其他 Angular 教程。

您可以通过作者的个人网站、Twitter、LinkedIn 和 Github 联系或关注作者。

参考资料

How to Install Angular on Windows: A Guide to Angular CLI, Node.js, and Build Tools