Routing in ASP.net core with Angular

Question

I have created a ASP.NET Core Web API with Angular project in VS 2019. I accepted all the default settings and it's successfully launched. My goal is to eventually create a combination of MVC, Angular with Areas and API in one project.

From the Configure method of Startup.cs, I can see the routing configuration is:

app.UseEndpoints(endpoints =>
{
 endpoints.MapControllerRoute(
 name: "default",
 pattern: "{controller}/{action=Index}/{id?}");
});

and the SPA configuration is:

app.UseSpa(spa =>
{
 spa.Options.SourcePath = "ClientApp";
 if (env.IsDevelopment())
 {
 spa.Options.StartupTimeout = new TimeSpan(0, 0, 80);
 spa.UseAngularCliServer(npmScript: "start");
 }
 });

I would like to learn how the index.html (along with Angular content/components) under ClientApp/src is chosen to be sent to the browser as the default page. How does this work?

• Todor Pavlovic: Do you have App.UseSpa(...) part at the bottom ?
• Sean Ad: @TodorPavlovic Yes. Do you know how that will decide the route behind the scenes?

Answer 1

Every webrequest enters the HTTP request pipeline. This pipeline is constructed in the Startup.Configure method. The webrequest traverses the pipeline from top to bottom, the webresponse traverses the pipeline back to the top.

The most basic, simplest middleware would look like this:

app.Use(async (context, next) => {
 // This middleware can manipulate the HTTP response headers,
 // response body, cookies, ...
 // We can decide if the next middleware should be called or not.
 // Sometimes this may not be necessary
 // (eg. serving a Sitemap, or a static file)
 await next();
});

In your case you have the following pipeline:

// This middleware reads the identity cookie and loads
// the information in the HttpContext.User. Finally calls the next middleware.
app.UseAuthentication();
// This middleware does something about routing decisions.
app.UseRouting();
// This middleware evaluates the AuthorizeAttribute to check if the route is accessible with the current Identity (which has been loaded before).
app.UseAuthorization();
// This middleware decides which controller method should be called. If a controller method matches the request url, the next middleware will not be called.
app.UseEndpoints(endpoints =>
{
 endpoints.MapControllerRoute(
 name: "default",
 pattern: "{controller}/{action=Index}/{id?}"
 );
});
// If none of the above middleware has "handled" the request, or more precisely,
// If each of the above middleware has called the next() delegate,
// The webrequest will end up in this middleware.
// As far as I know, the UseSpa middleware will never call the next() middleware.
app.UseSpa(spa =>
{
 spa.Options.SourcePath = "ClientApp";
 if (env.IsDevelopment())
 {
 spa.Options.StartupTimeout = new TimeSpan(0, 0, 80);
 spa.UseAngularCliServer(npmScript: "start");
 }
});

• Sean Ad: Fantastic. Exactly what I'm looking for. Thank you!

Answer 2

If your goal is to access specific controller action method try with app.MapControllers();

app.UseEndpoints(endpoints =>
 {
 endpoints.MapControllers();
 });

which will allow you call endpoint with attribute routing.

• Sean Ad: will probably do that. But still not clear about how current routing is working. I didn't post full code because don't know which part is related from a default Web API Angular project.

Answer 3

If using .NET 7 ASP .NET Core, try below.

app.UseEndpoints(endpoints =>
{
 endpoints.MapControllers();
 endpoints.MapFallbackToFile("/index.html");
});

Refer https://learn.microsoft.com/en-us/dotnet/core/compatibility/aspnet-core/7.0/fallback-file-endpoints#recommended-action