title: Partial server-side rendering of Angular 2 apps within an ASP.NET website
body: <p>I have an ASP.NET website, and I'm trying to incorporate some Angular 2 content into it. There are various pages in the website, with lots of static content. On certain pages I need to render some dynamic content that are rendered as Angular 2 applications.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* CSS not important */                                                                                         body { font-family: sans-serif; padding: 5px; } [data-dynamic-app] { color: white; padding: 8px; background: #4444ff; margin: 10px 0; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;h2&gt;Some Static Content&lt;/h2&gt;
    &lt;p&gt;
      There is static content on the page that is rendered by the ASP.NET application.
    &lt;/p&gt;
  &lt;/section&gt;
  
  &lt;div data-dynamic-app="appA"&gt;Placeholder for App A&lt;/div&gt;
  &lt;div data-dynamic-app="appB"&gt;Placeholder for App B&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is a not problem on the client side, as I have already managed to iterate through my placeholder elements (identified by the <code>data-dynamic-app</code> attribute on them), and bootstrap the appropriate Angular application for each. Easy peasy.</p>
  
  <p>However, for SEO reasons, I need to add server side rendering, so that the Angular parts of the page are rendered before they hit the client side code. The challenge is that I'm trying to build this into an existing Visual Studio solution for an ASP.NET website served through IIS, and I'm not sure how to go about doing that.</p>
  
  <p>I've been running ideas in my head, but as a frontend-focused developer without prior experience of Angular Universal, I can't determine which ideas are plain crazy, and which might actually get me somewhere. Here are a couple of things that have gone through my mind:</p>
  
  <ul>
  <li>Proxy the entire HTML output of the ASP.NET application through Angular Universal, and pre-render the dynamic parts.</li>
  <li>Use the <a href="https://github.com/aspnet/JavaScriptServices/tree/dev/templates/Angular2Spa" rel="noreferrer">Angular2Spa</a> application that is done in ASP.NET Core and has AngularUniversal built in, and somehow make it pull content from the existing ASP.NET site.</li>
  </ul>
  
  <p>The above may or may not make any sense at all, and I don't know the "if" or "how" of them. I'm largely unfamiliar with ASP.NET, IIS, and even Angular Universal. So, any ideas to clarify/improve the above, or entirely different and better ideas would be much appreciated.</p>