Visual Studio 2017 和角度集成

Posted 2023-03-24

【中文标题】Visual Studio 2017 和角度集成

【英文标题】：Visual Studio 2017 and angular integration

【发布时间】：2019-06-12 03:29:14

【问题描述】：

这是一个基本问题，但我想了解 Visual Studio 如何处理 Angular 项目。

通过使用 Visual Studio 2017 (C#) 中提供的 Angular 模板，您能否解释一下 Angular 应用程序的工作原理？

对于开发环境，我相信 Visual Studio 运行两台服务器：一台是用于 Web API 调用的 IIS，另一台是用于 Angular 项目的 node.js（我说的对吗？）

但是，在开发环境中，应用程序使用 Web API 项目的地址（例如 localhost:5000），而不是 node.js 提供的 Angular 应用程序地址（例如 localhost:66328）。这是怎么发生的？

生产环境呢？ Web API (C#) 和 Angular 都在 IIS 中工作？

如果 Angular 项目是在 Visual Studio 之外开发的，例如使用 Eclipse/Visual Studio Code/Webstorm，会怎样？如何将这两个项目集成到生产环境中？

我知道这些是非常基本的问题，但如果你能提供答案/参考/链接，我会很高兴。

【参考方案1】：

魔术不是在 Visual Studio 中完成的。魔术是在 .NET 中完成的。

这就是为什么您可以使用 VS Code 甚至 vim 在 Mac 上创建和开发 ASP.NET Core Angular 项目的原因！

为了简化，ASP.NET Core 所做的是：

在开发中，他们将所有 URL 重定向到 ng serve 的输出，但这是在所有路由都添加后发生的，因此转到控制器的 URL 仍然可以工作 在生产中，他们将这些 URL 重定向到静态文件处理程序，该处理程序查看 dist 文件夹，其中添加了 ng build 的结果。

代码并未完全对您隐藏。 请参阅我用作上述来源的Startup.cs file from the project template。

他们还使用 ASP.NET 节点服务（.NET 节点互操作）来实现服务器端渲染。这意味着如果你使用它，你需要在服务器上使用 Node。详情请见server-side rendering docs。

相同的文档页面还指出了他们如何有一个可选的开发代理，以防您想手动运行ng serve，它只是代理（发送）所有 URL（在所有路由检查 URL 并且不匹配之后）到 Angular 开发服务器。

【参考方案2】：

我在所有 Angular 开发中都使用 VS Code，所以我无法回答您问题的第一部分。考虑在此处咨询有关 Angular 模板的 Microsoft 文档：https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/angular?view=aspnetcore-2.2&tabs=visual-studio

我可以回答你问题的最后一部分。

如果角度项目是在视觉之外开发的呢？ 工作室这样使用eclipse/visual code/webstorm？我该如何整合 这两个项目用于生产目的？

您可以构建用于生产的 Angular 应用程序。这会在 dist 文件夹中生成几个包和其他文件（例如 index.html 文件）。然后，您可以获取这些文件并将它们部署到您的 IIS 或您用于生产的任何服务器。

您可以在此处找到一些一般信息：

https://angular.io/guide/deployment

虽然它大多是通用的，并不特定于特定的服务器，但它确实有一些针对 IIS 的特定说明。

请务必按照此处的说明进行操作：https://angular.io/guide/deployment#the-base-tag 将基本标记设置为相应的 IIS 文件夹。