Question

您可以通过角度应用程序使用预渲染的razor html页面吗？

设置：Angular 7，.net Core 2.1

从技术上讲，应该使用有角度的templateUrl并将其指向后端端点。我只是不知道如何将html页面解析为有角度的。同样，在编译角度项目时，它会在templateUrl中说的内容前加上一个前缀“ ./”，这使得无法编写地址。

Answer 1

是的，您可以在.Net Core和Angular 7中使用预渲染。

Mark Pizszak的Asp.Net Core Angular Universal Starter Template实现了预渲染功能。

它的实现包含许多细节。寻找.Net核心端的BuildPrerenderer扩展方法和HomeController

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()
        );

您需要在Index View.cs中

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

在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
    });
  });
});

如何从.net核心后端获取角度7的预渲染html页面？

1 个答案: