ASP.NET网站中Angular 2应用程序的部分服务器端呈现

Question

我有一个ASP.NET网站,我正在尝试将一些Angular 2内容合并到其中.网站上有各种页面,有很多静态内容.在某些页面上,我需要渲染一些呈现为Angular 2应用程序的动态内容.

/* CSS not important */                                                                                         body { font-family: sans-serif; padding: 5px; } [data-dynamic-app] { color: white; padding: 8px; background: #4444ff; margin: 10px 0; }

<section>
  <h2>Some Static Content</h2>
  <p>
    There is static content on the page that is rendered by the ASP.NET application.
  </p>
</section>

<div data-dynamic-app="appA">Placeholder for App A</div>
<div data-dynamic-app="appB">Placeholder for App B</div>

这在客户端是没有问题的,因为我已经设法迭代我的占位符元素(由data-dynamic-app它们上的属性标识),并为每个元素引导相应的Angular应用程序.十分简单.

但是,出于SEO的原因,我需要添加服务器端渲染,以便在页面的Angular部分到达客户端代码之前进行渲染.我面临的挑战是,我正在尝试将其构建为通过IIS提供的ASP.NET网站的现有Visual Studio解决方案,我不知道如何去做.

我一直在脑子里运行想法,但作为一个没有Angular Universal先前经验的前端开发人员,我无法确定哪些想法很简单,哪些可能实际上让我在某处.以下是我想到的一些事情:

• 通过Angular Universal代理ASP.NET应用程序的整个HTML输出,并预渲染动态部分.
• 使用在ASP.NET Core中完成的Angular2Spa应用程序并内置AngularUniversal,并以某种方式使其从现有的ASP.NET站点中提取内容.

以上可能或根本没有任何意义,我不知道它们的"如果"或"如何".我基本上不熟悉ASP.NET,IIS甚至Angular Universal.因此,任何澄清/改进上述或完全不同和更好的想法的想法都将受到高度赞赏.