Angular5+AspNetCore+SpaServices+cshtml可行吗？两大技术疑问咨询

Hey there, let's break down your two questions one by one—totally get wanting to skip the bloated default SpaTemplates and build a leaner integration for server-side rendering (SSR).

1. Angular 5/6 + Angular Universal SSR Capabilities #

Absolutely doable! Angular 5 and 6 both have solid, out-of-the-box support for Angular Universal, which lets you render Angular apps on the server. Here's a quick, practical breakdown of how to make this work with ASP.NET Core (without relying on the pre-built SpaTemplates):

• First, set up Angular Universal in your Angular project:

  • For Angular 6: Install required packages with npm install @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader --save-dev
  • For Angular 5: Use npm install @angular/platform-server @nguniversal/aspnetcore-engine --save-dev (the package structure was slightly different pre-Angular 6)
  • Create a server.module.ts that extends your root Angular module, configuring it specifically for server-side rendering.
  • Add a server.ts file to bootstrap the server-side app and handle incoming rendering requests.

• Integrate with ASP.NET Core:

  • In your Startup.cs, enable Node.js interaction with services.AddNodeServices()—this is required to run the Angular Universal renderer.
  • Configure routing so non-API, non-static requests are forwarded to the Angular Universal renderer. For example, in the Configure() method, add middleware that checks if the request targets an HTML page, then uses AspNetCoreEngine (or Angular 6's equivalent) to render the Angular app server-side and return the fully rendered HTML.
  • Don't forget to use app.UseSpaStaticFiles() to serve your Angular app's compiled static assets (JS, CSS, images, etc.).

Key notes: Angular 6 introduced the module-map-ngfactory-loader to handle lazy loading in SSR—make sure to configure this correctly if your app uses lazy routes. Also, avoid browser-specific APIs (like window or document) in server-rendered components, or wrap them in checks for the server environment (e.g., using isPlatformServer from @angular/common).

2. Microsoft.AspNetCore.SpaServices Support for CSHTML & Injecting Pre-Rendered Razor Views into Angular #

Great question—you absolutely can combine SpaServices with CSHTML and inject pre-rendered Razor content into Angular, though it requires some custom setup to sync the two rendering layers:

CSHTML Support with SpaServices #

SpaServices isn't limited to serving a static index.html—you can use a CSHTML page as your SPA entry point. Here's how:

• In Startup.cs, when configuring UseSpa(), instead of pointing to a static HTML file, set up a route that serves a CSHTML view. Example:

  app.UseSpa(spa =>
  {
      spa.Options.SourcePath = "ClientApp";
      if (env.IsDevelopment())
      {
          spa.UseAngularCliServer(npmScript: "start");
      }
      // For production, serve compiled Angular assets and use CSHTML as entry
      spa.UseSpaPrerendering(options =>
      {
          options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.js";
          options.BootModuleBuilder = env.IsDevelopment()
              ? new AngularCliBuilder(npmScript: "build:ssr")
              : null;
          options.RootComponentSelector = "app-root";
          options.ViewPath = "/Views/Shared/AngularEntry.cshtml"; // Your custom CSHTML entry
      });
  });
  

• Your AngularEntry.cshtml can include server-side Razor logic, dynamic data, and the root <app-root> element where Angular will mount its components.

Injecting Pre-Rendered Razor Views into Angular #

This is fully feasible, and there are two common approaches to make it work:

• Option 1: Pass Razor-rendered HTML as a string to Angular:

  • In your CSHTML or a controller action, render a Razor partial view to a string using IRazorViewEngine.
  • Pass this string to Angular either via a global JavaScript variable in the CSHTML entry, or as a server-side data payload that Angular Universal picks up during SSR.
  • In your Angular component, bind this HTML string using [innerHTML]—just make sure to sanitize it if the content includes user-generated input (use DomSanitizer from @angular/platform-browser).

• Option 2: Co-render Razor and Angular on the server:

  • If you're using Angular Universal, create an Angular component that fetches pre-rendered Razor content via an API endpoint (the endpoint renders the Razor view and returns the raw HTML) during server-side rendering.
  • Use Angular's TransferState API to pass this rendered content from the server to the client, so the client-side app doesn't re-fetch it during hydration.

Important caveats: Make sure to handle server-side hydration correctly—Angular needs to match the server-rendered DOM exactly to avoid re-rendering glitches. Also, if you're mixing Razor and Angular routing, configure ASP.NET Core routes to prioritize API/Razor requests before falling back to Angular's client-side routing.

内容的提问来源于stack exchange，提问作者Dwain Browne