这是一个两部分问题......

1)关于Angular Universal和Server Side Rendering的Angular 5/6功能 .

2)关于Microsoft.AspNetCore.SpaServices及其对cshtml页面的支持/将预渲染的剃刀视图注入Angular .

Use Angular 5 or 6 with Angular Universal for Server Side Rendering Calling cshtml pages??

The Goal

  • 将Angular和Asp.Net Core合并到一个项目中(不仅用于API,还用于服务器端HTML呈现)

  • NOT 使用现有的Microsoft.AspNetCore.SpaTemplates Angular启动器模板,因为它增加了一些我不需要的额外复杂性 .

  • 利用Asp.Net Core Razor的优势进行部分视图渲染和操作,然后将渲染的HTML发送回Angular客户端

  • Angular Client应该能够从服务器注入呈现的HTML,然后继续DOM操作,绑定等 .

My Progress

我已经成功创建了一个基本的Asp.Net Core项目,然后手动集成了Angular .

The steps are:

  • 创建Asp.Net核心项目,然后使用angular-cli在同一目录“ ng new MyAngularApp --minimal ”中创建一个新项目

  • 将生成的MyAngularApp中“src”文件夹中的所有文件手动复制到Asp.Net Core新文件夹“ClientApp”中

  • 然后将json配置文件(angular-cli,package&tsconfig)复制到Asp.Net项目的根目录中 .

Angular 5 merging config files with asp.net core

最佳参考我发现如何做到这一点是一个Pluralsight教程“ Building a Web App with ASP.NET Core, MVC, Entity Framework Core, Bootstrap, and Angular" by Shawn Wildermuth - https://app.pluralsight.com/library/courses/aspnetcore-mvc-efcore-bootstrap-angular-web/table-of-contents(查看有关Angular的客户端开发章节) - 为了记录我与Pluralsight或Shawn没有任何关系

The Problem/Question

我理解使用Node.js作为Angular Universal的后端,但我认为在Asp.Net Core世界中,通过Razor Page渲染html是一个非常有效的案例 .

  • Question: 我可以使用Microsoft.AspNetCore.SpaServices(https://github.com/aspnet/JavaScriptServices)来调用cshtml页面或调用服务器URL路径,然后在服务器上呈现,然后通过SpaService将HTML注入Angular框架 .

Here's an example of the Angular Component
enter image description here