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并使用CLI生成新角度来启动Angular 4项目应用程序。我真的不想要一个新项目，或者必须重构我创建的所有内容，以便为单独的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核心模板包
  - 注意：我不认可一个糟糕的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

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

几个月前，我处于完全相同的位置，我决定采用角度cli。我感谢上帝，我做出了这个决定。无比的更清晰，它实际上把它们应该是：.net core web api后端和完全分离的角度客户端。就像你没有将你的iphone / android应用程序放入VS解决方案一样，没有真正的理由不设置角度。

<强>更新要么使用MVC和Razor，要么使用Angular作为SPA，如果使用Angular，请使用Angular CLI。如果你使用angular，使用asp.net（核心）Web Api作为REST后端将数据输入到其中

Answer 2

“将Angular 4添加到ASP.NET核心项目”对我来说并不完全清楚，但有一种方法可以做到：

创建一个Angular 4项目（使用angular-cli）。
在与Angular项目相同的目录中创建一个ASP.NET Core项目（使用.NET Core CLI）。
调整webpack.config.js文件（这是angular-cli安装的一部分），以便自动将捆绑文件放在wwwroot目录中（webpack将对此负责）。

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

Answer 3

I have been working on a Angular 4(SPA) and .Net core web api. You can check out the repository and you might get a better understanding.

I had to find solutions to many areas like authentication, authorisation, social login, MongoDB connector e.t.c

Hope this would save time for someone stumbling on this.

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

Answer 4

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

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

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

CREATE A NEW COMPONENT：

打开命令提示符并导航到项目文件夹
运行命令：

ng生成组件带有小写字母的组件名称

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

CREATE A NEW SERVICE：

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

运行命令：

CGRect rect = CGRectIntersection([UIScreen mainScreen].bounds,
                                 view.frame);

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

将Angular 4添加到ASP.NETCore项目

更新

4 个答案:

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

CREATE A NEW COMPONENT：

CREATE A NEW SERVICE：