如何在Visual Studio 2013中整合Angular 5与ASP.NET项目并默认显示前端

Hey there! Since you're new to both ASP.NET and Angular 5 and working in Visual Studio 2013, let's walk through the steps to get your finished Angular frontend to load automatically when you run your solution—no more default ASP.NET homepage.

Step 1: Set Your Angular index.html as the Start Page #

First, we need to tell Visual Studio to prioritize your Angular entry point over the default ASP.NET page:

• In Solution Explorer, locate the index.html file from your Angular project (this is usually in the root of your Angular code, or inside a dist folder if you've already built it).
• Right-click the file and select Set as Start Page. This ensures VS loads this file first when you launch the project.

Step 2: Configure ASP.NET Routing to Play Nice with Angular #

ASP.NET's default routing might interfere with Angular's client-side routes, so we'll adjust it to only handle API requests and forward everything else to your Angular app:

1. Open your Global.asax.cs file and find the RegisterRoutes method.
2. Update the routing rules like this (adjust paths to match your project structure):

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    // Route API requests to your ASP.NET controllers
    routes.MapRoute(
        name: "Api",
        url: "api/{controller}/{action}/{id}",
        defaults: new { id = UrlParameter.Optional }
    );

    // Forward all non-API requests to Angular's index.html
    routes.MapRoute(
        name: "Default",
        url: "{*url}",
        defaults: new { controller = "Home", action = "Index" }
    );
}

3. If you don't already have a HomeController, add one to your project with an Index action that serves your Angular index.html:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        // Update the file path to match where your Angular index.html lives
        return File("~/index.html", "text/html");
    }
}

Step 3: Deploy Your Angular Build Files #

Since you've finished frontend development, make sure your compiled Angular assets are in the right place for ASP.NET to access them:

• If you used Angular CLI, run ng build (or ng build --prod for a production-ready build) to generate the dist folder with all your compiled JS, CSS, and assets.
• Copy all files from the dist folder into your ASP.NET project (you can put them in the root or a subfolder like ClientApp/dist—just make sure the src paths in index.html point to the correct locations).

Step 4: Test the Setup #

• Clean your solution first (go to Build > Clean Solution) to clear any old build artifacts.
• Rebuild the solution (Build > Build Solution) then hit F5 to run it. You should see your Angular frontend load instead of the default ASP.NET homepage!

Quick Note for VS 2013 Users #

Visual Studio 2013 is a bit older, so double-check that you have compatible versions of Node.js (Angular 5 requires Node 8.x+) and npm (5.x+) installed on your machine—this will avoid build issues with your Angular code.

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