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

Question

我想在 Visual Studio 2017 中的 ASP.NetCore 1.1 项目中使用 Angular 4（读取为：*.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) :: 使用内置模板！最佳选择 IMO。

• 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 做得很好。
    • 配置和设置详细信息：Blog post

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

    • 配置和设置详细信息：Microsoft Tutorial

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

    • Pluralsight Blog Guide

注意：还有 许多 其他方法可以让 Angular 与 ASP.Net / .NetCore 项目（例如 NPM、Bower、NuGet 等）一起工作。我试图强调那些简单且实际工作。根据上面的 Pluralsight 博客文章，这些也符合微软的发展方向。

Answer 1

[我知道您并没有特别提出这个问题，只是想分享一个我认为非常相关的想法]

几个月前我处于完全相同的位置，我决定使用 angular cli。我感谢上帝，我做出了这个决定。 无比清晰，它实际上把事情放在了应有的样子：.net core web api 后端和完全分离的 angular 客户端。就像您不会将您的 iphone/android 应用程序放入 VS 解决方案一样，也没有真正的理由将 Angular 应用程序放入 VS 解决方案中。

更新 要么将 MVC 与 Razor 一起使用，要么将 Angular 用作 SPA，如果您使用 Angular，请使用 Angular CLI。 如果您使用 Angular，请使用 asp.net (core) Web Api 作为 REST 后端将数据输入其中

Answer 2

我可以看出这是多么令人困惑，但 dee zg 是正确的。您将需要两个独立的项目。一个是 .net 核心后端 api (REST)，另一个是 Angular 2 spa。将彻底分离。

使用 AngularJS，您只需将 js 文件放入剃须刀视图中即可。但是，对于 Angular 2/4 和 React，最好将每个项目托管在自己的解决方案中。一开始这可能看起来很愚蠢，但是当您构建您的 api 时，它可以很容易地被移动应用程序、桌面应用程序等使用，从而在未来得到证明。

我知道 .net core 有一个 dotnet spa services angular cli powershell 命令，但它确实有点乱，实际上输出了无效的 html，可能不利于 SEO 等。 IMO，最好只在单独的项目中使用 Angular CLI。

在生产方面，您将分别托管 .net core api 和 angular 2 项目。

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 将对此负责）。

在我的博客上，I have a detailed tutorial demonstrating this approach。

Answer 4

我一直在研究 Angular 4(SPA) 和 .Net core web api。您可以查看存储库，您可能会得到更好的理解。

我必须找到许多领域的解决方案，例如身份验证、授权、社交登录、MongoDB 连接器等

希望这将为遇到此问题的人节省时间。

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

Answer 5

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

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

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

CREATE A NEW COMPONENT:

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

2. 运行命令：

   ng 生成组件 component-name-with-lowercase

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

CREATE A NEW SERVICE:

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

2. 运行命令：

    ng generate service _component-name-with-lowercase_
   

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