如何在 VS Code 中设置 Angular [指南]

　　Angular 是一个使用 JavaScript 的开源 Web 应用程序框架。与其他一些框架或编程语言不同，您需要在 Windows 中设置环境变量才能使此框架正常工作。因此，我们必须学习如何在 VS Code 中设置 Angular 并编写演示代码，这就是我们要做的。

　　如何在 VS Code 中设置 Angular

　　要在 Windows 计算机上的 VS Code 中设置 Angular，您需要按照以下步骤操作。

　　让我们详细谈谈它们。

　　1、 安装 Visual Studio Code

　　若要在 Angular 领域开始编码之旅，我们需要安装 Visual Studio Code。为了执行相同的操作，您需要转到 code.visualstudio.com 并下载适用于您的环境的应用程序。下载后，转到“下载”文件夹，运行安装介质，然后安装应用程序。

　　2、 设置 NodeJS

　　需要注意的是，虽然您可以使用 VSCode 编辑 Angular，但不能直接在编辑器中运行它。Angular 实际上是在 NodeJS 中执行的，NodeJS 是一个 JavaScript 环境，是本地 Web 开发设置的一部分。使用 NodeJS，您可以在 Web 浏览器的本地主机上运行 Angular。每次你在 VSCode 中对 Angular 代码进行更改时，它都会在浏览器中自动重新加载，这被称为“热重新加载”。但是，由于 Angular 在 NodeJS 中运行，因此您需要先安装 NodeJS。您可以通过转到 nodejs.org 来执行此操作.

　　安装 Node JS 以运行 Angular 时，请选择一个易于记忆的位置，例如简单而短的路径。如果您以后需要使用 NodeJS，这将很有帮助。因此，不要在程序文件中安装应用程序，而是将其安装在 D：\NodeJS 中，尽管这无关紧要。

　　3、 设置环境变量

　　接下来，我们需要在继续安装 Angular 之前为 NodeJs 设置环境变量。若要执行相同的操作，请按照下列步骤操作。

　　• 点击 Win + S，键入“环境变量”，然后打开它。

　　• 完成后，您需要复制 NodeJS 的位置。仅供参考，我们的是 D：\NodeJS。

　　• 单击环境变量。

　　• 现在，选择 路径 在 系统变量 部分，然后单击 编辑.

　　• 单击“新建”，粘贴位置，然后单击“确定”。

　　这样，您就输入了 NodeJS 环境变量。要检查它是否正常工作，请打开命令提示符，然后运行 node –version。 如果它给你一个版本，我们很好安装 Angular。

　　4、 安装 Angular

　　通过安装 NodeJS 创建合适的环境后，我们将安装 Angular。请按照下面提到的步骤执行相同的操作。

　　• 打开 Visual Studio Code。

　　• 导航到要使用 CD 或更改目录命令创建 Angular 文件的位置。我们在 D 盘中创建了一个新目录来创建一个项目，请查看随附的屏幕截图。

　　• 要在文件夹中安装 angular，我们需要运行以下命令。

　　npm install -g @angular/cli

　　• 然后执行以下命令，创建新项目。

　　ng new foldername

　　• 现在，使用“cd foldername”进入该文件夹并使用ng serve启动服务器。

　　希望现在您可以毫无问题地运行 Angular。

　　在工作区外运行 Angular CLI 时，此命令不可用

　　当我运行“ng serve”命令时，我收到一个错误，说该命令不可用。许多人怀疑 Angular 没有安装在他们的系统上，而实际上，唯一的问题是您不在正确的目录中。要解决它，只需对项目所在的目录执行“cd”操作，而不是根位置，而是实际的项目位置。所以，起初，当我运行命令时，我在 AngularProject，这是我的根文件夹，所以它不起作用。但是，当我将目录更改为 sampleFolder 并运行相同的命令时，它可以无缝工作。

　　我们建议您执行的解决方法是打开文件资源管理器，转到存储项目的位置，右键单击空屏幕，然后选择“终端>命令提示符”。然后运行ng serve。

　　如何在 Visual Studio Code 中设置 Angular 项目?

　　为了设置一个 Angular 项目，你首先需要在你的电脑上安装 NodeJS。完成后，您需要配置环境变量并使用 npm install -g @angular/cli 命令安装 Angular。现在，继续使用 ng new foldername 命令创建一个新目录，要了解更多信息，请查看前面提到的步骤。

　　如何生成 Angular VSCode?

　　Angular File Generator 是 Visual Studio Code 的一个方便的扩展，只需单击几下即可创建 Angular 文件。它基于 Angular CLI 构建，并使用与 CLI 相同的原理图。此外，它还提供了一个直接从终端生成文件的选项。