How do I get pre-rendered html pages from .net core back-end for angular 7? [closed]

Question

Can you use pre-rendered razor html pages by an angular app?

Setup: Angular 7, .net Core 2.1

Technically should be possible using templateUrl in angular and point that to the back-end endpoint. I just don't know how to parse the html page into angular. Also when the angular project is compiled it adds a prefix, './', to whatever it says in templateUrl which makes it impossible to write an address.

Answer 1

Yes, You can use prerendering with .Net Core & Angular 7.

Mark Pizszak has Asp.Net Core Angular Universal Starter Template which implements pre-rendering feature.

It's implementation contains many details. Look for BuildPrerenderer extension method and HomeController for .Net Core Side

public async Task<IActionResult> Index () {
    var prerenderResult = await this.Request.BuildPrerender ();

    this.ViewData["SpaHtml"] = prerenderResult.Html; // our <app-root /> from Angular
    this.ViewData["Title"] = prerenderResult.Globals["title"]; // set our <title> from Angular
        this.ViewData["Styles"] = prerenderResult.Globals["styles"]; // put styles in the correct place
        this.ViewData["Scripts"] = prerenderResult.Globals["scripts"]; // scripts (that were in our header)
        this.ViewData["Meta"] = prerenderResult.Globals["meta"]; // set our <meta> SEO tags
        this.ViewData["Links"] = prerenderResult.Globals["links"]; // set our <link rel="canonical"> etc SEO tags
        this.ViewData["TransferData"] = prerenderResult.Globals["transferData"]; // our transfer data set to window.TRANSFER_CACHE = {}
    ...

    return View();
}

BuildPrerender

 public static async Task<RenderToStringResult> BuildPrerender(this HttpRequest request) =>
        // Prerender / Serialize application (with Universal)
        await Prerenderer.RenderToString(
            "/",
            request.HttpContext.RequestServices.GetRequiredService<INodeServices>(),
            new System.Threading.CancellationTokenSource().Token,
            new JavaScriptModuleExport(request.HttpContext.RequestServices.GetRequiredService<IHostingEnvironment>().ContentRootPath + "/ClientApp/dist/main-server"),
            $"{request.Scheme}://{request.Host}{request.HttpContext.Features.Get<IHttpRequestFeature>().RawTarget}",
            request.HttpContext.Features.Get<IHttpRequestFeature>().RawTarget,
            // ** TransferData concept **
            // Here we can pass any Custom Data we want !
            // By default we're passing down Cookies, Headers, Host from the Request object here
            new TransferData
            {
                request = request.AbstractRequestInfo(),
                thisCameFromDotNET = "Hi Angular it's asp.net :)"
            }, // Our simplified Request object & any other CustommData you want to send!
            30000,
            request.PathBase.ToString()
        );

In your Index View.cs you need

@Html.Raw(ViewData["SpaHtml"])

In Angular Side (boot.server.ts)

import { createServerRenderer } from 'aspnet-prerendering';
export default createServerRenderer((params) => {

// Platform-server provider configuration
const setupOptions: IEngineOptions = {
  appSelector: '<app-root></app-root>',
  ngModule: AppModule,
  request: params,
  providers: [
   // Optional - Any other Server providers you want to pass
   // (remember you'll have to provide them for the Browser as well)
  ]
};

return ngAspnetCoreEngine(setupOptions).then(response => {

    // Apply your transferData to response.globals
    response.globals.transferData = createTransferScript({
      someData: 'Transfer this to the client on the window.TRANSFER_CACHE {} object',
      fromDotnet: params.data.thisCameFromDotNET // example of data coming from dotnet, in HomeController
    });

    return ({
      html: response.html, // our <app-root> serialized
      globals: response.globals // all of our styles/scripts/meta-tags/link-tags for aspnet to serve up
    });
  });
});