使用 Visual Studio 运行 Angular 应用程序

如何使用 Visual Studio 运行 Angular 2 应用程序

在本教程中，我们将介绍如何利用 Visual Studio 的 F5 键（通常也称为 CTRL F5）来启动 Angular 2 应用程序。请在阅读本文之前，先阅读我们上一篇文章，其中我们讨论了使用 Visual Studio 构建应用程序所需的开发环境的设置以及从命令提示符运行 Angular 2 程序。

• 如果在开发解决方案时遇到以下编译器错误：
• 接下来，请执行以下操作。我从下面的 Stack Overflow 链接中找到了答案。

现在，让我们来讲解如何使用 Visual Studio 运行 Angular 2 应用程序

• 首先，让我们将应用程序的起始页配置为 index.html 文件，该文件位于 src 文件夹中。
• 现在，如果您通过按 Visual Studio 中的 F5 键或 CTRL+F5 键运行 Angular 2 应用程序，您将看到以下消息。

然而，在我们使用 Visual Studio 创建 Angular 应用程序时，标准做法是我们应该能够通过按 F5 键或 CRTL+F5 键来启动 Angular 2 应用程序。如果您希望这样做，则必须执行以下操作。

步骤 1：首先启动应用程序。然后，打开浏览器的开发者工具。为此，请按 F12 键。启动浏览器开发者工具后，选择“控制台”选项卡。

浏览器在项目的根目录下找不到 styles.css、systemjs.config.js 和 main.js。当我们启动 Angular 应用程序时，以上列出的文件会自动包含在 src 文件夹中。

因此，在这种情况下，我们必须指示浏览器从 src 文件夹加载这些文件，而不是从项目根文件夹加载。打开 index.html 文件并修改 base href 值以完成此操作。

步骤 2：按 CTRL+F5 重新加载 index.html 页面，以保存我们在步骤 1 中所做的修改。如下图所示，您现在将收到另外一组 404 资源未找到错误。

如前面的控制台选项卡所示，shim.min.js、zone.js 和 system.src.js 文件不在 src/node_modules/… 目录中。要解决此问题，请打开 index.html 页面并在 node_modules 前添加“/”。

需要牢记的重要一点是，您不再可以使用命令提示符来启动此 Angular 应用程序。

如何使更改自动反映在浏览器中？

为了理解这一点，我们必须首先找出问题所在。打开位于项目 src 文件夹内的 app 文件夹中的 app.component.ts 文件。通过打开 app.component.ts 文件，将 name 属性值设置为 Angular。

现在保存您的更改，然后刷新 index.html 页面。您应该会注意到所有内容都保持不变，这意味着您所做的更改没有显示在页面上。但是，它显示了属性的先前值。但是，如果您通过按 F5 或 CTRL+F5 再次从 Visual Studio 运行应用程序，那么您将能够看到更改。

问题是什么？

需要牢记的最重要的事情之一是，TypeScript 语言会被翻译成 JavaScript，浏览器使用 JavaScript 来显示文本。当我们更改 TypeScript 代码并保存它时，Angular 应用程序默认不会自动将其翻译成 JavaScript。这就是为什么即使在刷新页面后，更改的内容也没有显示在浏览器中的原因。但是，当我们通过按 F5 或 CTRL+F5 从 Visual Studio 启动程序时，TypeScript 会被翻译成 JavaScript，这就是为什么浏览器会显示更改。

但是，如果您愿意，可以更改此默认行为。这基本上意味着一旦您在进行修改后保存 TypeScript，它将自动转换为 JavaScript。您所要做的就是将 `compileOnSave` 设置添加到 tsconfig.json 文件中，并将其设置为 `true`。

此 tsconfig.json 文件位于“src”文件夹中。进行上述修改后，它应该如下所示。

在进行上述修改后，当我们更改 TypeScript 文件并保存它时，TypeScript 文件现在将立即转换为 JavaScript。因此，我们所做的任何修改在页面重新加载时都会自动显示在浏览器中。

禁用缓存

为此，请按 F12 键打开浏览器开发者工具，选择“网络”选项卡，然后勾选“停用缓存”复选框，如下图所示。

或者，您可以通过将以下代码添加到 web.config 文件来禁用应用程序的缓存。

使用 Visual Studio 运行 Angular 应用程序的是 Visual Studio Code（VS Code），一个强大而轻量级的源代码编辑器。Angular 是一个用于创建动态单页 Web 应用程序的框架，凭借其许多扩展和功能，Visual Studio Code 为 Angular 开发提供了出色的支持。

以下是使用 Visual Studio Code 执行 Angular 应用程序的步骤：

安装 Visual Studio Code (VS Code)

有 Linux、macOS 和 Windows 版本。

安装 Angular 命令行界面 (CLI)

Angular CLI 是一个出色的工具，用于创建、管理和实现 Angular 应用程序。创建新的 Angular 项目：在安装 Angular CLI 后，您可以启动一个新的 Angular 项目。打开您希望启动项目的目录。

安装依赖项

在 Visual Studio Code 中打开项目后，通过选择“视图”>“终端”或按 `Ctrl+``（反引号）键来导航到集成终端。在终端中，运行以下命令来安装项目依赖项：

运行应用程序

安装完依赖项后，您就可以运行 Angular 应用程序了。在集成终端中，运行以下命令：

此命令构建应用程序并启动开发服务器。

探索和开发

生日快乐！现在您的 Angular 应用程序已成功运行，您可以开始检查项目结构并增强其功能。对于 Angular 编程，Visual Studio Code 提供了广泛的功能集，包括调试支持、IntelliSense、语法高亮等。

这些说明将帮助您有效地使用 Visual Studio Code 运行 Angular 应用程序，并利用其众多功能和扩展来实现顺畅的开发。在处理 Angular 项目时，您可以随时尝试使用不同的 Visual Studio Code 工具和扩展来进一步改善您的开发体验。

结论

总之，使用 Visual Studio Code 执行 Angular 应用程序是一个简化的过程，它结合了 Visual Studio Code 的灵活性和 Angular CLI 的可靠性。通过利用 Angular CLI 的脚手架和依赖管理功能，开发人员可以快速启动新项目并轻松处理依赖项。Visual Studio Code 是这项工作的一个重要工具，它提供了功能齐全且先进的 Angular 编程环境，包括调试支持、IntelliSense 和版本控制系统集成。

Angular 和 Visual Studio Code 之间的互利互动本质上捕捉了结合最先进框架和高级开发环境的好处。通过拥抱这种合作，开发人员可以释放无数的创造性可能性，并创造出吸引全球用户的引人入胜的网络体验。