如何将 Angular 2 应用程序与 .net 核心连接起来答案

【问题标题】：How to connect angular 2 app with .net core如何将 Angular 2 应用程序与 .net 核心连接起来
【发布时间】：2017-10-13 07:34:44
【问题描述】：

作为一个初学者，我已经安装了 angular cli、npm 等所有的东西，我可以添加一些组件。但在我们使用一些后端之前，它是不完整的。我在.net背景中。到目前为止，我一直在使用 MVC，但现在我正在迁移到 .net 核心。

嗯，Angular2 和 .net core 是两个不同的应用程序。现在我有 angular-2 应用程序。如何在 .net 核心 Web 应用程序中添加此应用程序？

通常我们使用 CLI 命令来添加组件和其他东西。那么，当我在 .net core 应用中添加 Angular 应用时，如何才能自动添加组件呢？

【问题讨论】：

标签： node.js angular .net-core

【解决方案1】：

您应该构建一个 API，然后从您的 Angular 应用程序中与它通信。

看看这个教程，它涵盖了基本概念：

https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api

或者，如果您想将您的应用程序作为一个新项目集成到您的解决方案中，请查看这个：

https://www.pluralsight.com/guides/microsoft-net/using-angular-2-with-asp-net-core

【讨论】：

它适用于 angular 1。我正在尝试 angular2。
我没注意到。添加了指向 Angular 2 教程的链接

【解决方案2】：

如果您使用的是 Asp Core，最好的办法是使用它的 spa 模板here

您可以使用安装它

 dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

用 Angular 开始一个新项目

dotnet new angular

现在的问题是您想将 angular cli 与 asp 核心集成。我假设您想使用 angular cli 命令快速生成组件。从一个新的 Angular 项目中，查找 angular-cli.json 并将其复制粘贴到您的 asp 项目的根目录。然后更新你的 package.json 并像这样在 devDepencies 中添加@angular/cli

"devDependencies": {
    "@angular/cli": "^1.0.0",
    "webpack": "^2.6.0"
  }

您现在可以运行此命令

ng g c my-component

确保再次运行 npm install 并重新运行 dotnet run / dotnet watch run 如果它不起作用。

【讨论】：

【解决方案3】：

感觉我需要在这里添加我的 2c。 Angular2+ 和 Asp.Net Core 2+ 是开发持久应用程序的完美搭档。话虽如此，请不要误以为微软会在这里成为您的朋友。不要尝试在 Angular 模板或 Microsoft.AspNetCore.SpaTemplates 包中使用 VS 构建，因为它会导致您陷入一大堆问题的兔子洞（只需查看本网站上有关它的所有问题）。根据我自己尝试不同方法的经验，创建空的 Asp.Net Web API 项目并使用 Angular-CLI 工具在其中创建 Angular 应用程序。从这一点开始，您可以使用 angular-cli 和 dotnet cli 来获得非常愉快和高效的体验。按照this blog from Levi Fuller 中的所有步骤操作，您将立即启动并运行。

【讨论】：

【解决方案4】：

创建 ASP.Net 核心应用程序，使用 cli 创建 Angular 项目。构建 Angular 项目并将其复制到 www 文件夹。您可以使用命令提示符添加组件。在.Net核心应用程序中创建api并从角度调用它

【讨论】：