如何在ASP.NET项目中添加Angular视图并集成指定路由模块？

Absolutely, there are reliable approaches to integrate your Angular game module into your ASP.NET project and add Angular-built views. Let’s walk through both of your requirements with practical steps tailored to common ASP.NET setups (we’ll focus on ASP.NET Core since it’s the modern standard, but I’ll note adjustments for older MVC if needed).

This approach works if your Angular game module is a standalone SPA that you want to serve under the home/game path in your ASP.NET app.

Step 1: Build Your Angular Project with Correct Base Path #

First, compile your Angular game module with a base href that matches your target ASP.NET route. Open your terminal in the Angular project folder and run:

ng build --prod --base-href /home/game/

This ensures Angular’s client-side routing works correctly under the home/game prefix.

Step 2: Copy Angular Build Files to ASP.NET #

After building, you’ll find all compiled files in the dist/[your-angular-project-name] folder. Copy every file from this directory into a new folder in your ASP.NET project: wwwroot/home/game.

Step 3: Configure ASP.NET Routing & Static Files #

In your ASP.NET Core Program.cs, update the middleware pipeline to serve the Angular static files and handle SPA fallback routing (so Angular can manage its own client-side routes):

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
// Serve root static files first
app.UseStaticFiles();

// Serve Angular static files under /home/game
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "home", "game")),
    RequestPath = "/home/game"
});

app.UseRouting();

app.UseAuthorization();

// Default MVC route
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

// Fallback route: send all /home/game requests to Angular's index.html
app.MapFallbackToFile("/home/game/{*path}", "home/game/index.html");

app.Run();

For older ASP.NET MVC (non-Core), you’ll need to:

• Copy the Angular files to Content/home/game or Scripts/home/game
• Configure web.config to allow serving these static files
• Set up a route in RouteConfig.cs that points to a controller action serving the Angular index.html, and use a wildcard to handle client-side routes.

If you want to embed Angular components directly into ASP.NET Razor views (instead of a standalone SPA), follow this approach:

Step 1: Build Angular for Embedded Use #

Skip the base-href flag when building your Angular project, since it will be embedded in an existing ASP.NET view:

ng build --prod

Copy the compiled files from dist/[your-project]/ (specifically runtime.js, polyfills.js, main.js, and styles.css) into your ASP.NET wwwroot/js and wwwroot/css folders respectively.

Step 2: Create a Razor View for the Game Module #

In your ASP.NET project, add a new Razor view at Views/Home/Game.cshtml with the following content:

@{
    ViewBag.Title = "Game Module";
    Layout = "~/Views/Shared/_Layout.cshtml"; // Use your existing layout if needed
}

<!-- Angular root component (matches your Angular app's root selector) -->
<app-game></app-game>

<!-- Load Angular's compiled scripts and styles -->
<link rel="stylesheet" href="~/css/styles.css">
<script src="~/js/runtime.js"></script>
<script src="~/js/polyfills.js"></script>
<script src="~/js/main.js"></script>

Note: Replace <app-game> with the actual root selector of your Angular game module.

Step 3: Map the Route in ASP.NET #

Update your HomeController to add an action for the game view, and use attribute routing to set the home/game path:

using Microsoft.AspNetCore.Mvc;

namespace YourAspNetProject.Controllers
{
    public class HomeController : Controller
    {
        // ... Your existing actions

        [Route("home/game")]
        public IActionResult Game()
        {
            return View();
        }
    }
}

Now visiting yourdomain/home/game will load the Razor view, which initializes and renders your Angular game module.

• API Integration: If your Angular game needs to call ASP.NET APIs, use relative paths (e.g., /api/game/scores) to avoid cross-origin issues. For local development, use Angular’s proxy config to forward API requests to your ASP.NET backend.
• Development Workflow: While developing, you can run Angular’s dev server separately and embed it in your ASP.NET view using an iframe, or use the proxy config to test API calls without deploying builds.
• Caching: For production, enable static file caching in ASP.NET to improve performance of your Angular assets.

内容的提问来源于stack exchange，提问作者Carlos Ortiz