将Angular 4添加到ASP.NETCore项目

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

以前使用ASP.NET Core 1.0和Visual Studio 2015，您只需将AngularJS（1.xx）作为依赖项添加到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项目
  • 配置和设置详细信息： 链接

Visual Studio 2015（ project.json ）

• 工具：最高版本-preview2 – 没有进一步的更新，所有新的.NET Corefunction都将转移到VS 2017

  • Asp.Net Core 1.X + Angular（v2.0~v4.0）

    • Asp.Net核心模板包
    • 注意：我不认可一个糟糕的VS插件，Mads Kristensen做得很好。
    • 配置和设置详细信息： 博客文章

  • Asp.Net Core 1.X + AngularJS（~1.5）

    • 配置和设置详细信息： Microsoft教程

  • Asp.Net MVC 5 + AngularJS（~1.5）

    • Pluralsight博客指南

注意：还有很多其他方法可以让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

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

使用AngularJS，您可以将js文件放入剃刀视图中并将其称为一天。 但是，使用Angular 2/4和React，最好将每个项目托管在自己的解决方案中。 这在开始时可能看起来很愚蠢，但是当你构建你的api时，它可以通过移动应用程序，桌面应用程序等消耗的能力轻松地进行未来validation。

我知道.net核心有一个dotnet spa服务angular cli powershell命令，但它实际上有点乱，实际上输出的无效html 可能对SEO等有害。最好，IMO，只使用角度CLI在一个单独的项目中。

在生产方面，您将分别托管.net核心API和角度2项目。

希望有所帮助。

Answer 3

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

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

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

Answer 4

我一直在研究Angular 4（SPA）和.Net核心web api。 您可以查看存储库，您可能会更好地理解。

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

希望这可以节省绊倒这个的人的时间。

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

Answer 5

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

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

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

创建一个新组件 ：

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

2. 运行命令：

   ng生成组件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