将 Angular 4 添加到 ASP.NETCore 项目

Add Angular 4 to an ASP.NETCore Project

我想在我的 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)

Visual Studio 2015 (project.json)

注意:有 许多 其他方法可以使 Angular 与 ASP.Net / .NetCore 项目一起工作,例如 NPM、Bower、NuGet 等. 我试图突出显示那些简单且实际有效的方法。根据上面的 Pluralsight 博客 post,这些也符合 Microsoft 的发展方向。

[我知道你并没有专门问这个问题,只是想分享一个在我看来非常相关的想法]

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

更新 将 MVC 与 Razor 一起使用,或者将 Angular 用作 SPA,如果您使用 Angular,请使用 Angular CLI。 如果您使用 angular,则使用 asp.net(核心)Web Api 作为 REST 后端

将数据输入其中

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

使用 AngularJS,您可以将 js 文件放入 razor 视图中,然后收工。然而,对于 Angular 2/4 和 React,最好将每个项目托管在它自己的解决方案中。这在开始时可能看起来很愚蠢,但是当您构建 api 时,它可以很容易地通过移动应用程序、桌面应用程序等使用的能力来证明未来

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

在生产环境中,您将分别托管 .net 核心 api 和 angular 2 个项目。

我不太清楚你所说的 "Add Angular 4 to an ASP.NET Core Project" 是什么意思,但一种方法如下:

  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

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

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

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

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

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

在 VS2017 中新建 ANGULAR 项目:

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

CREATE A NEW COMPONENT:

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

  2. 运行命令:

    ng 生成组件 组件名称小写

这将生成 .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