将Angular应用放在ASP.NET Web API解决方案中的何处？

我正在启动一个未开发的应用程序，并且我想使用ASP.NET（4.6）和Angular2。对于后端，我已经在Visual Studio中创建了一个项目，现在我想知道将Angular应用程序放在哪里。我真的想在前端使用npm和node-tools，但最终它将托管在同一个Azure App Service实例中，Angular应用程序位于或类似domain.com/的API下domain.com/api/。

如何在Visual Studio中分离应用程序？Angular应用程序应该属于自己的项目吗？我应该在与API相同的项目中使用Angular应用程序吗？即使我不想为此使用nuget和其他VS工具？（对于前端，VS或多或少是美化的代码编辑器）。对于这种组合，我还没有找到任何最佳做法。

您有两个选择。

在解决方案中创建单独的mywebsite.api和mywebsite.app项目。

优点

• 适当分离关注点。
• 您可以将更新分别部署到api和前端。
• 网站的体系结构可以独立更改（即，您可以更新api以在asp.net 5上运行，而不会影响网站）
• 清洁器

在一个项目中同时使用客户端应用程序和api创建一个项目

优点

• 易于部署更新
• 无需进行配置即可与CORS一起使用

如何在本地托管和开发应用程序。

一个有效的开发解决方案是使用lite-server运行客户端（Angular 2）应用程序，并使用IIS / Casini承载Web api代码。Angular 2快速入门教程（链接到下面）中给出了如何使用它的一个很好的示例。我的开发过程是通过Visual Studio运行api，并使用Visual Studio Code和lite-server处理客户端站点编码（Atom是另一个不错的选择）。

来自lite-server文档。轻量级开发的仅节点服务器，可为Web应用程序提供服务，在浏览器中打开它，在html或javascript更改时刷新，使用套接字注入CSS更改以及在未找到路由时具有备用页面。

https://code.visualstudio.com/

https://angular.io/docs/js/latest/quickstart.html

https://www.youtube.com/watch?v=e_FVeYWUF3s

https://github.com/johnpapa/lite-server

我的看法

在同一解决方案中同时使用Nuget / NPM不会出现问题，并且这不会影响您选择项目结构。

我仅将单个项目方法用于演示/概念验证应用程序。对于生产版本，我将始终正确区分我的关注点，并有一个专用的api项目。

我发现了这个种子项目https://github.com/damienbod/AngularWebpackVisualStudio/，它使您可以在单个Visual Studio（2017）项目中开发和托管客户端和服务器。

我同意@CountZero关于使用两个站点进行托管（特别是关注点分离）的优点的评论，但是对我来说，最大的缺点是必须在您的API中启用CORS支持，而在大多数情况下，您的API唯一的使用者是您自己的客户端前端。我不是CORS方面的专家，但这感觉像是不必要的开销，并且还带有其他安全威胁。

好吧，显然，您可以将它们分为两个解决方案，在解决方案中添加另一个项目，或将它们放在同一个项目中。我会说我会的。

恕我直言，如果您想利用IIS中的Sessions和/或在API中隐藏身份验证过程，也可以在Visual Studio中编写angular。如果您安装Web开发扩展，VS2015可以与angular很好地集成（智能）。我必须说这种方式将更加紧凑和便携。

如果要在后端项目上添加文档页面，则将它们分成各自的项目（相同的解决方案），并从子域或子文件夹提供api。

如果您对以上内容均不感兴趣，并且对惯用的方式感到更自在，那就继续吧。如果您要进行基于令牌的身份验证，则可以毫无疑问地分离项目。

在VS 2015中，您可以选择在调试时启动解决方案中的多个项目，只要为每个项目设置不同的项目URL。

举例来说，您可以将Angular应用程序项目http://localhost:55000/设置为在中运行，而API项目可以设置为在中运行http://localhost:55000/api。您可以在“ Web”选项卡上的“项目属性”对话框中设置“项目URL”属性。

然后，要设置多个启动项目，请在“解决方案属性”对话框的“公共属性”下，选择“启动项目”节点。在右侧，您将找到Single startup project和的选项Multiple startup projects。选择多个启动项目单选按钮。然后在Angular项目旁边选择适当的Action（因为它是Angular，所以无需调试即可开始，并且您可能会在浏览器中对其进行调试），然后在API项目旁边选择Start。

现在，当您点击运行时，Angular应用程序将在浏览器中打开，并且Web API也将开始运行。您可以在Web API方法中设置断点，然后从Angular应用中命中它们。