将Angular 4添加到ASP.NET Core项目

Question

我想在我的ASP.NetCore 1.1项目中使用Angular 4，在Visual Studio 2017中（读作：*.csproj文件）。

之前在ASP.NET Core 1.0和Visual Studio 2015中，你可以将AngularJS（1.x.x）添加到project.json中作为依赖项，并自动连接。

现在，随着ASP.NetCore和VS2017的到来，project.json文件已经消失了，我只能找到有关使用CLI启动Angular 4项目并使用CLI生成新的angular应用程序的文档。我不想要一个新项目，也不想重构我已经创建的所有内容以提供服务于单独的UI项目。我只是想增强我的应用程序，增加一些客户端UI体验。

有什么建议吗？

更新

这个问题得到了很多的关注，但信息帮助不大，所以我提供这个更新。

Visual Studio 2017（*.csproj）

• Asp.Net Core 2.0 + Angular (v2.0~v4.0) :: 使用内置模板！我认为这是最好的选择。

• Asp.Net Core 1.X + Angular (v2.0~v4.0)

  • 创建VS项目。
  • 通过Angular CLI创建Angular项目。
  • 配置和设置详细信息：Link

Visual Studio 2015 (project.json)

• 工具：最高版本-preview2 - 没有更多更新, 所有新的.NET Core功能将移动到VS 2017

  • Asp.Net Core 1.X + Angular (v2.0~v4.0)

    • Asp.Net Core模板包
    • 注意: 我不会推荐一个糟糕的VS插件，Mads Kristensen做了很好的工作。
    • 配置和设置详情 : 博客文章

  • Asp.Net Core 1.X + AngularJS (~1.5)

    • 配置和设置详情 : 微软教程

  • Asp.Net MVC 5 + AngularJS (~1.5)

    • Pluralsight博客指南

注意：有许多其他方法可以使Angular与ASP.Net / .NetCore项目一起使用，例如NPM、Bower、NuGet等。我试图突出那些简单实用的方法。此外，这些方法符合Microsoft根据上面Pluralsight博客文章中所述的方向。

- Adam Vincent

Answer 1

[尽管你没有具体要求我做这件事，但我想分享一下我的看法，因为我认为这很相关]

几个月前，我和你当时的处境一模一样，我决定使用Angular CLI。我感到非常庆幸我做出了这个决定。 Angular CLI让事情变得更加清晰易懂，它将.net core web api后端和完全分离的Angular客户端放在了应该呆的位置上。就像你不会将iPhone/Android应用程序放入VS解决方案中一样，没有真正的理由将Angular应用程序放置在其中。

更新 要么使用带有Razor的MVC，要么将Angular用作SPA，如果你使用Angular，则使用Angular CLI。 如果你使用Angular，请将数据作为REST后端通过asp.net（core）Web Api进行输入。

- dee zg

---

严格来说，不是这样的。ASP.NET也可以是Web API，纯REST。如果您正在为UI创建ASP.NET站点（因此使用Razor或类似工具），则不需要Angular，因为它不是单页应用程序。另一方面，如果您使用Angular，则不需要Razor，而是需要ASP.NET Web API REST将数据提供给您的Angular客户端。 - dee zg

不，ReactJS和Angular在这里处于同一条线上，因为它们都是SPA（单页应用程序）。我的观点是，如果您选择SPA技术（无论是ract、angular还是其他技术），那么您显然不需要razor。反之亦然。选择是：要么使用razor（没有angular、react等），要么使用asp.net web api + SPA（react、angular或其他技术[其中我推荐angular，但这是个人偏好]）。希望这能对这个话题有所启示。 - dee zg

明白了。如果你能在答案中总结一下，我会接受它。我认为“要么使用带有Razor的MVC，要么使用Angular作为SPA，如果你使用Angular，请使用Angular CLI”是一个比试图让Angular在我的应用程序中做它不设计做的事情更好的答案。 - Adam Vincent

好事我读到了，虽然我已经知道这比将所有内容放在ASP.net核心项目中更好的方法。当你这样做时，你还要处理的另一件事是为你的应用程序设置CORS。 - Sonny Recio

我听到Adam在这里想要表达什么，但我也看到dee zg所建议的实际应用方面。我认为使用AngularJS作为ASP.NET Razor的结构化脚本语言是合理的。我以这种方式使用它来确保安全性在服务器端，并且数据在客户端加载时具有所有丰富的客户端功能。 - Sam

Answer 2

我能理解这可能有些令人困惑，但是dee zg是正确的。你需要创建两个不同的项目。一个是.net core后端api(REST)，另一个是Angular 2 spa。它们之间会有完全分离。

使用AngularJS时，你只需将js文件放入razor视图中即可完成。然而，对于Angular 2/4和React来说，最好将每个项目都托管在自己的解决方案中。这一开始可能看起来很傻，但是当你构建api时，它可以轻松地为移动应用、桌面应用等提供服务，从而实现易于升级的功能。

我知道有一个针对.net core的dotnet spa服务angular cli powershell命令，但它真的有点混乱，并且输出的html无效，这可能对SEO等造成影响。在我看来，最好还是在单独的项目中使用angular CLI。

在生产环境中，你需要分别托管.net core api和angular 2项目。

- DJDJ

Answer 3

我不完全明白你所说的“将Angular 4添加到ASP.NET Core项目”的意思，但有一种方法可以实现：

1. 创建一个Angular 4项目（使用angular-cli）。
2. 在与Angular项目相同的目录中创建一个ASP.NET Core项目（使用.NET Core CLI）。
3. 调整webpack.config.js文件（它是angular-cli安装的一部分），以便自动将打包文件放入wwwroot目录中（webpack将负责此操作）。

在我的博客上，我有一个详细的教程演示了这种方法。

- Anton

---

嗨Anton！我看到你最近的一些答案被社区删除了，因为它们只是指向站外内容的链接而已。我很高兴看到你现在已经解决了这个问题。这个答案更好，因为它包含了重要部分“在答案本身中”。不幸的是，我还有一个小问题要提出。:-)查看链接的页面，似乎是你发布或所属的内容。由于你没有披露你的关系，社区将其标记为垃圾邮件。 - Cody Gray

我取消了那个标记并编辑了所需的免责声明，因为这似乎是一个真正的贡献尝试。但请将此牢记于心。我们在帮助中心有相关页面，您应该阅读一下。祝一切顺利！ - Cody Gray

谢谢，Cody！对于不便我感到抱歉。下次会做得更好。 - Anton

感谢您的回答，Anton。在发帖时，几乎没有关于这个问题的信息。在其他答案的帮助下，再加上一些尝试，我基本上得出了相同的解决方案。确实是前沿技术。 - Adam Vincent

Answer 4

我一直在开发 Angular 4（SPA）和 .Net Core web api。你可以查看代码库，或许能更好地理解。

我不得不找到很多解决方案，例如认证、授权、社交登录、MongoDB 连接器等等。

希望这能为遇到类似问题的人节省时间。

https://github.com/Sathya-B/Angular-.NetCore-MongoDB

- Sathya

Answer 5

我正在使用Angular 6和ASP.NET CORE 2.1，但这也可能适用于Angular 4。

在VS2017中创建一个新的Angular项目：

1. 在VS中创建一个新的Web应用程序。文件夹名称不应包含“.”，因为Angular不会接受它。例如：DatingApp-SPA。然后选择“空白”。
2. 关闭VS，以便它不会锁定任何权限的文件夹
3. 导航到项目文件夹的基本路径。
4. 运行“ng new DatingApp-SPA”。这将向现有的DatingApp-SPA项目添加Angular好东西。
5. 再次在VS上打开解决方案。

创建一个新组件：

1. 打开命令提示符并导航到项目文件夹

2. 运行以下命令：

   ng generate component component-name-with-lowercase

这将生成.html、.spec.ts、.ts、.css文件，并更新app.module.ts

创建新服务：

1. 打开命令提示符并导航到项目文件夹

2. 运行以下命令：

    ng generate service _component-name-with-lowercase_
   

这将默认在\app文件夹中生成.ts和.spec.ts文件。我们可以将这些文件移动到另一个文件夹，如\app\_services。

- Judyll

---

嘿，感谢@Judyll的分享。这个问题和被接受的答案肯定已经过时了。你的提议有一个主要缺陷。仅在VS项目文件夹中生成Angular 6应用程序是不够的。我强烈建议查看当前的.NET Core SPA模板，它已经更新并且与一年前的.NET Core相比工作得非常好。https://learn.microsoft.com/en-us/aspnet/core/client-side/spa/angular?view=aspnetcore-2.1&tabs=visual-studio - Adam Vincent

感谢 @AdamVincent 的建议。根据我的个人经验，我还没有遇到过重大缺陷，但我会阅读你提供的有关使用 .NET CORE SPA 模板的文档，看看能发现什么。再次感谢！ - Judyll

SPA模板中还包含样板代码，告诉.NET现在负责处理SPA，例如app.UseSpa()。此外，您可能还想告诉VS2017 / VS Code如何将您的Angular应用程序打包到.NET Core应用程序中（通常通过任务运行器，如Grunt / Gulp或Webpack等）。 - Adam Vincent