How do I get Angular 19 SSR to work with .NET 6?

Hello guys how are you? Welcome back on my blog Therichpost. Today in this post I am going to share How do I get Angular 19 SSR to work with .NET 6?

Angular 19 came. If you are new then you must check below two links:

• Angular 19 Basic Tutorials
• Free Angular Admins

Now guys here is the complete code snippet and please follow carefully:

To get Angular 19 SSR (Server-Side Rendering) working with .NET 6, you need to integrate Angular Universal (for SSR) with the .NET Core application to serve the Angular app efficiently. Here’s a step-by-step guide:

1. Set Up Angular 19 with SSR

Ensure you have Angular 19 installed and configured with Angular Universal for SSR.

1. Install Angular Universal:

   ng add @nguniversal/express-engine

This command sets up SSR for your Angular app using the Express engine. It creates the necessary server files like server.ts and updates the build process for SSR.

2. Update Angular Application:
   Ensure your Angular application is SSR-ready. Test it using:

   npm run dev:ssr

This command starts the Node.js server for SSR.

2. Create a .NET 6 Web Application

1. Create a new ASP.NET Core Web API or Web App:

   dotnet new webapi -n AngularSSRWithDotNet
   cd AngularSSRWithDotNet

2. Install the required packages:

   dotnet add package Microsoft.AspNetCore.SpaServices.Extensions

3. Set up your .NET project to serve static files for the Angular app.

3. Integrate Angular SSR with .NET

1. Add Angular Build Output to .NET:

• Build the Angular SSR app:
  bash npm run build:ssr
• Copy the dist/<app-name> folder (which contains the Angular SSR build) to the wwwroot folder of your .NET app. Use a tool like nginx, or automate this using a build script.

1. Configure Middleware in .NET:
   Update the Program.cs file or Startup.cs file to configure Angular SSR integration.

   using Microsoft.AspNetCore.SpaServices;

   var builder = WebApplication.CreateBuilder(args);
   var app = builder.Build();

   app.UseStaticFiles();

   // Route all other requests to Angular Universal's SSR server
   app.MapWhen(
       context => !context.Request.Path.Value.StartsWith("/api"),
       builder =>
       {
           builder.UseSpa(spa =>
           {
               spa.Options.SourcePath = "ClientApp"; // Path to Angular app (e.g., dist folder)

               spa.UseProxyToSpaDevelopmentServer("http://localhost:4000"); // SSR Node.js server URL
           });
       }
   );

   app.Run();

3. Start Angular SSR with the Node.js Server:
   Ensure the Node.js server for Angular SSR is running:

   npm run serve:ssr

4. Deploy:

• Deploy the Node.js SSR server and the .NET backend.
• Configure reverse proxying (e.g., with Nginx or IIS) to route requests to the .NET app and SSR server.

4. Testing

• Run both the .NET and Angular SSR servers locally.
• Access the .NET backend (e.g., http://localhost:5000) and verify SSR works.

Tips

1. Use Docker for containerizing both Angular SSR and .NET applications for easier deployment.
2. Consider using PM2 or another process manager for the Angular SSR Node.js server in production.
3. Optimize the SSR build for production:

   npm run build:ssr --configuration production

This setup allows .NET 6 to act as a backend API and a host for Angular Universal’s SSR output.

Let me know if you need more help! ???? or comment below.

Jassa

Thanks